Vue项目如何根据不同运行环境打包项目

npm install cross-env --save-dev  // 安装 cross-env 依赖

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:test": "cross-env vue-cli-service build --mode test",
    "build:prod": "cross-env vue-cli-service build --mode production",
},

// package.json
{
  "scripts": {
      "build:testing": "cross-env vue-cli-service build --mode testing",
  }
}

// 开发环境模式 
// 环境变量
NODE_ENV=development
// 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中
VUE_APP_ENV = 'development'

// 测试环境模式
// 环境变量（这里的环境变量是跟打包有关的，production则会进行压缩代码等，真正跟每个环境有关的变量是下面以VUE_APP开头的变量）
NODE_ENV=test
// 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中
VUE_APP_ENV = 'test'

// 线上环境模式
// 环境变量
NODE_ENV=production
// 以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中
VUE_APP_ENV = 'production'

let baseUrl = '';
let env = process.env;
 
if (env.VUE_APP_ENV === 'development') {
    baseUrl = `http://xxx/`; // 本地服务地址
} else if(env.VUE_APP_ENV === 'production'){
    baseUrl = `http://xxx/`; // 正式环境服务地址
}else if(env.VUE_APP_ENV === 'test'){
    baseUrl = `http://xxx/`; // 测试环境服务地址
}
export {
    baseUrl,
    env
}

// 测试环境打包项目
npm run build:test
 
// 生产环境打包项目
npm run build:prod