上來就干貨！

項目文件結(jié)構(gòu)

多項目文件結(jié)構(gòu).png

vue.config.js 配置代碼

/**
 * 配置參考: https://cli.vuejs.org/zh/config/
 */
const CompressionWebpackPlugin = require("compression-webpack-plugin")
const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path')
const glob = require("glob");
const { name } = require('./package');
/**-------------------------------------指定運行/打包項目  配置開始-------------------------------------------------------*/
// 運行命令 npm run start --name=項目名稱
// 打包命令 npm run build --name=項目名稱
// 要啟動/打包的項目名稱 通過process.env.npm_config_name獲取到命令行后面的 --name
const projectName = process.env.npm_config_name

if (!projectName) {
  console.log('請指定項目名稱 --name=xxx');
  process.exit()
}
// 文件夾./src/projects/下存在的項目
const projects = []
glob.sync('./src/projects/**/main.js').map(item => {
  const pj = item.match(/\.\/src\/projects\/(.*)\/main.js/)[1]
  projects.push(pj);
})
if (!projects.includes(projectName)) {
  console.log(`${JSON.stringify(projects)}中不存在指定的項目${projectName}`);
  // 退出程序
  process.exit()
}

const projectPath = `src/projects/${projectName}`
const pages = {
  [projectName]: {
    entry: projectPath + '/main.js',
    name: projectName,
    filename: `index.html`,
    template: 'public/index.html',  //首頁入口，該路徑也可以指定到單個項目文件夾下
    chunk: ["chunk-vendors", "chunk-common", projectName]
  }
}
// console.log(pages);
/**-------------------------------------指定運行/打包項目  配置結(jié)束-------------------------------------------------------*/

const setting = require(`./src/projects/${projectName}/setting.js`)
module.exports = {
  pages,  // 前面配置好的頁面入口
  publicPath: setting[process.env.NODE_ENV],  // 具體看項目需求配置
  outputDir: `dist/${projectName}/`,
  chainWebpack: config => {
  /**----------------------------------------------------------------
    *如果不通過pages屬性配置，可通過一下方法配置
    config
       .plugin('html')
       .tap(args  => {
         args[0].title = projectName
         args[0].entry = projectPath + '/main.js'
         args[0].template = projectPath + '/index.html'
         return args 
       })
    ----------------------------------------------------------------------*/
    // 防止多頁面打包卡頓
    config.plugins.delete("named-chunks");
    return config;
    
  },
  configureWebpack: config => {
    return {
      plugins: [
        //復(fù)制單個項目配置文件pj_config.js
        new CopyWebpackPlugin([{
          from: path.resolve(__dirname, `${projectPath}/pj_config.js`),
          to: config.output.path
          // to: `dist/${projectName}/`
        }])
      ]
    }
  },
  productionSourceMap: false,
  devServer: {
    host: '0.0.0.0',
    open: false,
    port: 8001,
    overlay: {
      errors: true,
      warnings: true
    },
    proxy: {}
  }
}

打包后目錄結(jié)構(gòu)

多個項目打包結(jié)果.png