配置Vue-cli多页面应用

大家也注意到了吧，前两篇文章讲述了怎样修改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也可以访问和打包了。

如果我们连moduleNames都不想配置，可以使用glob来自动生成这个配置。