Vue 配置一次打包执行多个命令，并将分别输出到不同的文件夹

Vue 配置一次打包执行多个命令，并将分别输出到不同的文件夹

• 在 package.json 中配置构建命令

// package.json
{
  "scripts": {
    "build:production": "vue-cli-service build --mode production",
    "build:staging": "vue-cli-service build --mode staging",
    "build:both": "npm run build:production && npm run build:staging"
  }
}

• 配置环境文件

  • env.production

  # .env.production
  VUE_APP_OUTPUT_DIR=dist/production_dist
  

  • env.staging

  # .env.staging
  VUE_APP_OUTPUT_DIR=dist/staging_dist
  

• 在 vue.config.js 中动态读取该变量

// vue.config.js
const { defineConfig } = require('@vue/cli-service')

module.exports = define => {
  const outputDir = process.env.VUE_APP_OUTPUT_DIR || 'dist'

  return defineConfig({
    outputDir,
    // 其他配置...
  })
}