我们知道vue可以快速开发web单页应用，而且官方为我们提供了自己的应用脚手架vue-cli，我们只需要下载脚手架，安装依赖后就可以启动vue应用雏形。这得益与webpack的依赖追踪，各种资源后缀的loader，以及相关webpack插件的强大功能。
然而有些时候，我们有多页面的开发需求，在这种情况下，我们可以为多页面构建相应的多个应用，比如通过vue-cli生成多个应用目录，但是这样一方面会多出很多重复的构建代码和样板代码，另外也会破坏应用的统一性，不便于维护。我们可以在vue-cli的基础上通过修改webpack配置来让脚手架具备构建多页应用的能力。
webpack在打包编译vue文件时，最重要的是入口和输出的配置、所以我们会主要修改这两个部分的配置。
我的个人博客就是一个vue多页应用，包含客户端和后台管理两个部分，下面就以它为例子来说明如何实现vue多页应用，整个过程是基于vue-cli2的。
入口配置
入口配置比较简单，打开webpack.base.conf.js,只需要修改entry配置就可以了，修改如下：
entry: {
client: ["babel-polyfill", "./src/Client/main.js"],
manager: ["babel-polyfill", "./src/Manager/main.js"],
},
增加babel-polyfill主要是兼容低版本浏览器，因为Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
输出配置
输出配置要分别配置开发环境以及生产环境的输出，我们先来配置开发环境。打开webpack.dev.conf.js,在plugin配置项中添加以下配置，并删除原来的HtmlWebpackPlugin配置。
new HtmlWebpackPlugin({
filename: 'client.html',
template: './tpl/index.html',
inject: true,
chunks: ['client'],
}),
new HtmlWebpackPlugin({
filename: 'manager.html',
template: './tpl/index.html',
inject: true,
chunks: ['manager'],
}),
可以看到，这里使用HtmlWebpackPlugin插件配置了两份html输出，fliename是编译输出的文件名，template是html模版，不同页面可以使用相同的模版也可以使用不同的模版。
实际上，开发环境下我们访问的页面资源是被webpack管理在内存中的，webpack-dev-server作为本地服务根据url返回内存资源给浏览器从而呈现页面。但是多页面情况下如何去根据url返回对应的页面呢，答案就是配置devServer下的historyApiFallback，该配置项会传递给connect-history-api-fallback这个中间件，对request请求的url进行重定向，避免开发环境下页面404，配置如下：
historyApiFallback: {
rewrites: [
{ from: 'index', to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
{ from: /\/admin/, to: path.posix.join(config.dev.assetsPublicPath, 'admin.html') },
],
},
到这里开发环境的配置就完成了，npm start启动项目后，使用localhost:8080可以看到客户端页面，使用localhost:8080/admin可以看到后台管理页面。
接下来对生产环境进行配置，首先打开config／index.js，
在build配置项中增加目标html的输出路径及名称。
index: path.resolve(__dirname, '../server/public/index.html'),
admin: path.resolve(__dirname, '../server/public/admin.html'),
接下来打开build／webpack.prod.conf.js，在pulgin中添加以下配置：
new HtmlWebpackPlugin({
filename: config.build.index,
template: './tpl/index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'client']
}),
new HtmlWebpackPlugin({
filename: config.build.admin,
template: './tpl/index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'manager']
}),
这个地方要特别注意的是一定要配置chunks，否则所有打包后的文件将同时引入admin.html和index.html。
这样，整个vue多页面配置就完成了。我们可以看到，如果项目中每增加一个一级页面，就需要多处修改webpack配置，很繁琐。为此，更好的方式是基于vue-cli2进行一层封装，这是我写的一个扩展示例multiPage-vue-cli。
history模式
有的时候出于强迫症，不能忍受hash模式下的url上存在#符号，或者是出于业务需求，url不能带#号。这个时候要考虑采用vue-router的history模式，history模式的前端配置与上文大同小异，但是由于history模式下url路径的跳转是vue-router利用h5的history API动态添加的，而手动刷新页面会导致找不到路由从而产生404错误，因此还需要对服务端进行配置，将路由重定向到一级页面。比如可以对nginx作如下配置：
server {
listen 80;
location ^~ /api {
proxy_pass http://127.0.0.1:3000;
}
location /admin {
root /home/silentport.github.io/nginx/blog/;
index admin.html;
try_files $uri $uri/ /admin.html;
}
location / {
root /home/silentport.github.io/nginx/blog;
index index.html;
try_files $uri $uri/ /index.html;
}
}
其中，
第一个配置是将所有的以/api开头的请求转发到node服务器处理;
第二个配置是将所有/admin开头的请求重定向到admin.html;
第三个配置是将所有的不是以api和admin开头的请求重定向到index.html，root的配置还可以响应页面的静态文件；
这样一来客户端访问就没什么问题了，刷新页面也不会404，一切正常，但是管理端访问依然存在问题，问题是出在当在admin.html中做路由切换，并手动刷新的时候，url中的admin消失，这样一来nginx会将它重定向到客户端的页面。针对这个问题，还需要在admin的页面中对vue-router增加一个base配置项，让路由跳转的时候url始终携带这个base，配置如下：
export default new Router({
mode: 'history',
base: '/admin',
routes: [
]
})
经过上述所有的配置以后，history模式就可以正常使用了。
网友评论