vue开发多页面应用 - hash模式和history模式

我们知道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模式就可以正常使用了。