vue-cli和webpack多页面配置

地址：https://www.liuyjuan.com/211.html

注：这里使用的是vue脚手架一键部署

1)build文件目录下的webpack.base.conf.js文件（main.js的路径）

entry: {
   app: './src/main.js',//原代码默认的配置
   app2:'./src/main2.js'//新添加的配置(app2是自定义的名字 注：请记住这个名字)
},

2)build文件目录下的webpack.dev.conf.js文件（index.html）

new HtmlWebpackPlugin({//这个是原代码
     filename: 'index.html',//生成的html
     template: 'index.html',//来源html
     inject: true,//是否开启注入
     chunks: ['app']//需要引入的Chunk，不配置就会引入所有页面的资源(注：此行源代码上没有，如果是单页面无需添加，多页面请添加上)
   }),
  // 多页:index2.html → app2.js   你要添加的代码
   new HtmlWebpackPlugin({
     filename: 'index2.html',//生成的html
     template: 'index2.html',//来源html
     inject: true,//是否开启注入
     chunks: ['app2']//需要引入的Chunk，不配置就会引入所有页面的资源（app2是刚才要记住的名字）
   }),

3)build文件目录下的webpack.prod.conf.js文件

new HtmlWebpackPlugin({//原代码
     filename: process.env.NODE_ENV === 'testing'
       ? 'index.html'
       : config.build.index,
     template: 'index.html',
     inject: true,
     minify: {
       removeComments: true,
       collapseWhitespace: true,
       removeAttributeQuotes: true
       // more options:
       // https://github.com/kangax/html-minifier#options-quick-reference
     },
     // necessary to consistently work with multiple chunks via CommonsChunkPlugin
     chunksSortMode: 'dependency',
     chunks: ['manifest','vendor','app']//需要引入的Chunk，不配置就会引入所有页面的资源（多页面需要添加这行代码）
   }),
  // 多页:index2.html → app2.js   添加的代码
   new HtmlWebpackPlugin({
       filename: config.build.index2,
       template: 'index2.html',//你另一个的html页面
       inject: true,
       minify: {
           removeComments: true,
           collapseWhitespace: true,
           removeAttributeQuotes: true
       },
       chunksSortMode: 'dependency',
       chunks: ['manifest','vendor','app2']//需要引入的Chunk，不配置就会引入所有页面的资源(app2是之前记住的名字)
   }),

4)配置config文件夹下面的index.js文件（打包输出的文件位置）

找到build index: path.resolve(__dirname, '../dist/index.html'),//原代码 index2: path.resolve(__dirname, '../dist/index2.html')//添加的第二个页面

5）另一个页面的文件位置问题及其他问题

1：index2.html放在index.html同级​ 1-1：index2里面的代码注意项 注意这个id是 app2 <div id="app2"></div>2：App2.vue放在App.vue同级3：main2.js放在main.js同级​ 3-1：main2.js里面的代码注意项 import App from './App2'//注意这个路径是指向App2.vue   new Vue({    el: '#app2',//注意这个绑定的DOM元素的ID是刚才设置index2里面的app2    router,    template: '<App/>',    components: { App } })

阅读更多