模块结构

src
 -- pages
   -- index
     -- main.js
     -- index.html
     -- App.vue
     -- 其他
   
   -- task
    -- main.js
     -- index.html
     -- App.vue
     -- 其他
     
   -- 其他模块

vue.config.js配置

// 简单的vue.config.js
module.exports = {
    productionSourceMap: false,
    pages: {
        index: {
            // page 的入口
            entry: 'src/pages/index/main.js',
            // 模板来源
            template: 'src/pages/index/index.html',
            // 在 dist/index.html 的输出
            filename: 'index.html',
            chunks: ['chunk-vendors', 'index']
        },
        task: {
            // page 的入口
            entry: 'src/pages/task/main.js',
            // 模板来源
            template: 'src/pages/task/index.html',
            // 在 dist/index.html 的输出
            filename: 'task.html',
            chunks: ['chunk-vendors', 'task']
        }
    },
    configureWebpack: {
        output: {
            filename: 'js/[name].js?hash=[hash]',
            chunkFilename: 'js/[name].js?hash=[chunkhash]',
        }
    },
    css: {
        extract: {
            filename: 'css/[name].css?hash=[contenthash]',
            chunkFilename: 'css/[name].css?hash=[contenthash]'
        },
    },
    // vue.config.js中添加如下配置
    // 控制条件是minChunks字段，所以该字段的值是当前activity/src/projects里面的html的个数
    chainWebpack: config => {
      config.optimization.splitChunks({
        cacheGroups: {
          vendors: {
            name: 'chunk-vendors',
            minChunks: 2,
            chunks: 'initial'
          },
          common: {}
        }
      });
    }
}