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 作如下配置：

请到「今天看啥」查看全文