使用 vue-cli 开发多页应用改webpack的配置，多入口即可。相当于多个单页面入口，这个时候你需要解决的问题，是如何webApp-A 跳转到 webApp-B 因为两个路由是不共用的－－－－－－－－－－ 这部分交给 nginx 去解决。

添加一个单页面

假设你现在需要点击一个页面index2.html，对应的入库是main2.js

全局配置

• 修改 webpack.base.conf.js

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

运行、编译的时候每一个入口都会对应一个Chunk

run dev 开发环境

• 修改webpack.dev.conf.js

打开 buildwebpack.dev.conf.js ，在plugins下找到new HtmlWebpackPlugin，在其后面添加对应的多页，并为每个页面添加Chunk配置。

chunks: [‘app2′]中的app对应的是webpack.base.conf.js中entry设置的入口文件

plugins:[
    // https://github.com/ampedandwired/html-webpack-plugin
    // 多页:index.html → app.js
    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，不配置就会引入所有页面的资源
    })
]

run build 编译

• 修改 config/index.js
  打开config/index.js，找到build下的index: path.resolve(__dirname, ‘../dist/index.html’)，在其后添加多页

build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    index2: path.resolve(__dirname, '../dist/index2.html'),
},

• 修改 webpack.prod.conf.js

打开buildwebpack.prod.conf.js，在plugins下找到new HtmlWebpackPlugin，在其后面添加对应的多页，并为每个页面添加Chunk配置

HtmlWebpackPlugin中的filename引用的是 config/index.js中对应的 build

plugins: [
    // 多页:index.html → app.js
    new HtmlWebpackPlugin({
        filename: 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',
        inject: true,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeAttributeQuotes: true
        },
        chunksSortMode: 'dependency',
        chunks: ['manifest','vendor','app2']//需要引入的Chunk，不配置就会引入所有页面的资源
    }),
]

参考链接：
https://segmentfault.com/a/1190000007287998
https://www.zhihu.com/question/41339583/answer/90614536
http://www.tuicool.com/articles/MBF3emR