Vue创建多页面应用

使用webpack模板创建项目vue init webpack multi-entry-vue
1、在目录下创建新的入口文件main2.js，这个文件引用不同的组件比如App2.vue
2、进入 \build\webpack.base.conf.js 目录下，在module.exports的域里，找到entry，在那里配置添加多个入口

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js',
    app2: './src/main2.js'
  },

3、进入\build\webpack.dev.config.js,修改开发时的入口：

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks:['app']  //增加
    }),
    //增加
    new HtmlWebpackPlugin({
      filename: 'index2.html',
      template: 'index.html',
      inject: true,
      chunks:['app2']
    }),

4、进入\build\webpack.prod.config.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'] //增加
    }),
//增加
    new HtmlWebpackPlugin({
      filename: "index2.html",
      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','app2']
    }),

5、一般情况下，使用相同的Index.html作为起始页模板是可以的，不一样的话，还需要在config/index.js中增加模板定义。
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),