vue-cli和webpack多页面配置

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

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

entry: {
    app: './src/main.js',//原代码默认的配置
    app2:'./src/main2.js'//新添加的配置(app2是自定义的名字 注：请记住这个名字)
  },: {
    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是刚才要记住的名字）
    }),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是之前记住的名字)
    }),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')//添加的第二个页面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>注意这个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 }
})import App from './App2'//注意这个路径是指向App2.vue
  
new Vue({
    el: '#app2',//注意这个绑定的DOM元素的ID是刚才设置index2里面的app2
    router,
    template: '<App/>',
    components: { App }
})