大家也注意到了吧,前两篇文章讲述了怎样修改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来自动生成这个配置。