多个项目共用同一个配置

上来就干货！

项目文件结构

多项目文件结构.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);
/**-------------------------------------指定运行/打包项目  配置结束-------------------------------------------------------*/

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: [
        //复制单个项目配置文件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: {}
  }
}

打包后目录结构

多个项目打包结果.png