配置 Vue 多页面应用

大家也注意到了吧，前两篇文章讲述了怎样修改 Vue CLI 的设置来开发部署多页面应用，这里的设置是写不灵活的，使用场景有限。项目工程经常会说到配置。所谓配置，就是通过一些常量来代替其它配置文件中写死的代码，比如说 app1, app2。那么怎么在 Vue CLI 中配置多页面应用呢？

Vue CLI 配置一般写在 config/index.js 中。这里我们用moduleNames: ['app1', 'app2']来设置要添加的模块名。接下来我们根据这个配置来修改其它配置文件中的设置。

第一步

打开webpack.base.conf.js，将

entry: {
  app1: './src/app1/main.js',
  app2: './src/app2/main.js'
}

修改为：

entry: () => {
  let setting = {}
  config.moduleNames.forEach(name => {
    setting[name] = `./src/${name }/main.js`
  })
  return setting
}

ES6 的语法是不是好简单？

npm start 运行一下开发环境，访问一下 localhost:8080/app1.html，

第二步

配置开发环境的模板文件位置。打开 webpack.dev.conf.js。遍历 moduleNames 添加 HtmlWebpackPlugin 插件并修改其配置：

config.moduleNames.forEach(name => {
  devWebpackConfig.plugins.push(
    new HtmlWebpackPlugin({
      filename: `./${name}.html`,
      template: `./src/${name}/index.html`,
      inject: true,
      favicon: path.resolve(__dirname, '../favicon.ico'),
      chunks: [name]
    })
  )
})

同样检查一下我们的这步配置有没有正确。

第三步

开发环境的 index.html 模板文件位置。打开 webpack.pro.conf.js。同样添加 HtmlWebpackPlugin 插件并修改其配置：

config.moduleNames.forEach(name => {
  webpackConfig.plugins.push(
    new HtmlWebpackPlugin({
      filename: config.build.assetsRoot + `/${name}.html`,
      template: `src/${name}/index.html`,
      inject: true,
      chunks: ['manifest', 'vendor', name],
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
    })
  )
})

先前的 filename 是在 config/index.js 中设置的，不能动态设置。那种方式用在这里已经不合适了，我们可以借助 assetsRoot 和 name 变量在 HtmlWebpackPlugin 插件中直接设置。

现在在 src 添加一个项目 app3，将moduleNames: ['app1', 'app2']改为moduleNames: ['app1', 'app2', 'app3']，运行 npm start 和 nmp run build 来验证一下，app3 也可以访问和打包了。