Vue项目一个命令生成多个环境包并压缩

1.设置打包后的文件名

• outputDir

• Type: string

• Default: 'dist'

  当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。

  提示

  请始终使用 outputDir 而不要修改 webpack 的 output.path。

• vue.config.js中添加

    let outputDir = ‘dist’  // 根据不同环境配置使用不同文件名
    // 例如：
    // if (process.env.NODE_ENV === 'production') {
    //     outputDir = '正式-dist'
    // } else {
    //     outputDir = '测试-dist'
    // }
    module.exports = { 
        outputDir:outputDir
    }

2.安装 cnpm/npm install concurrently

• 在vue项目中添加对应.env.prod .env.test文件及相应配置

  "scripts": {
     // "build": "vue-cli-service build --mode dev",
    "build:prod": "vue-cli-service build --mode prod",
    "build:test": "vue-cli-service build --mode test",
    "build" :"concurrently \"vue-cli-service build --mode prod\" \"vue-cli-service build --mode test\""
  }

3.添加多个打包命令，根据不同环境打包生成不同文件

• 在 package.json 文件中添加多个打包命令

    npm run build  // 默认打包名称，使用命令打包多个环境包
    npm run build:prod  // 生产环境打包命令
    npm run build:test  // 测试环境打包命令

4.执行打包命令，生成多个环境dist包

    执行：npm run build

5.安装 cnpm/npm install filemanager-webpack-plugin

• 在vue.config.js文件中添加配置如下

    const FileManagerWebpackPlugin = require('filemanager-webpack-plugin')
    let outputDir = 'dist' // 为输出文件名
    // 例如：
    // if (process.env.NODE_ENV === 'production') {
    //     outputDir = '正式-dist'
    // } else {
    //     outputDir = '测试-dist'
    // }
    module.exports = { 
     configureWebpack: config => {
      if (process.env.NODE_ENV === 'production') {
        // 正式环境执行
        config.plugins.push(
          new FileManagerWebpackPlugin({
            events: {
              onEnd: {
                delete: [
                  // 首先需要删除项目根目录下的dist.zip
                  `./dist/${outputDir}.zip` // eg: './dist/*zip
                ],
                archive: [
                  // 然后我们选择dist文件夹将之打包成dist.zip并放在根目录
                  {
                    source: `./${outputDir}`, // eg: './dist
                    destination: `./${outputDir}-${new Date().toLocaleString()}.zip` // eg: './dist/项目名称-时间.zip'
                  }
                ]
              }
            }
          })
        )
      }
    },
    或
    plugins：[
      new FileManagerWebpackPlugin({
         events: {
            onEnd: {
               delete: [
                 // 首先需要删除项目根目录下的dist.zip
                 `./dist/${outputDir}.zip` // eg: './dist/*zip
               ],
               archive: [
                 // 然后我们选择dist文件夹将之打包成dist.zip并放在根目录
                 {
                    source: `./${outputDir}`, // eg: './dist
                    destination: `./dist/${outputDir}-${new *Date*().format('YYYY-MM-DD')}.zip` // eg: './dist/项目名称-时间.zip'
                 }
               ]
             }
           }
         })
       )
     ]
   }  

6.打包成功-生成多个dist包/多个dist压缩包