场景
在开发过程中，通常会遇到这样的问题：

在开发环境、测试环境和生产环境中我们会用到不一样的服务接口
在生产环境出现了出现了某个bug，但是在测试环境不存在，这时候就需要开发环境访问生产环境的接口
多端一体的项目模式
这些情况都要手动去切换接口地址，这样会很麻烦，有时还可能出现操作失误。这时候就需要用到cross-env进行分环境配置了，根据不同的环境，我们使用对应的接口，这样也就不用手动去操作。

第一步 安装依赖 cross-env
使用 cross-env 解决跨平台问题。在终端运行：

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

第二步 修改 package.json 文件
在 package.json 中 scripts 属性中 build 命令替换为：

"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命令过长，这时候就可以选择模式配置

默认模式
vue-cli项目下默认有三种模式：

development模式：在 vue-cli-service serve 时使用。
production模式：在 vue-cli-service build 和 vue-cli-service test:e2e 时使用。
test模式：在 vue-cli-service test:unit 时使用。
每个模式都会将 NODE_ENV设置为模式的名称，比如在development模式下，NODE_ENV为 ‘development’。

自定义模式
自定义模式需要通过.env文件进行配置，.env文件分为以下类型：

.env ， 在所有的环境中被载入
.env.local ， 在所有的环境中被载入，但会被 git 忽略
.env.[mode] ， 只在指定的模式中被载入
.env.[mode].local， 只在指定的模式中被载入，但会被 git 忽略
[mode] 是自定义的模式名称

例：通过在package.json脚本中增加 --mode [mode]来指定模式。

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

第三步 创建不同环境的文件

在项目根目录新建  .env.development文件：

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

在项目根目录新建  .env.test文件：

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

在项目根目录新建  .env.production文件：

// 线上环境模式
// 环境变量
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

结果测试：

vue3项目怎么打包yarn vue项目打包方式_环境变量