设置环境变量 区分打包

设置环境变量 区分打包

需求

• 项目根据部署环境的不同，做不同的处理

方法

• 根据不同环境 设置环境变量 打包时带参数区分
  例如 npm run build --mode sky 则会加载 .env.sky 中的环境变量

使用

// .env.sky 文件内容
VUE_APP_MODE=SKY

// .env.bird 文件内容
VUE_APP_MODE=BIRD

• 代码判断 区分处理

const mode = process.env.VUE_APP_MODE;
if (mode === 'SKY') {
  // ...
} else if (mode === 'BIRD') {
  // ...
} else {
  // ...
}

遇到的问题

1. 新增 .env.sky 文件 新增设置 VUE_APP_MODE=SKY 打包后发现dist文件结构变化 没有按照css js结构放置打包后的文件
   原因是，当前环境 NODE_ENV 不是 production ，需在 .env.sky 中 新增 NODE_ENV=production
   参考官网：当你运行 vue-cli-service build 命令时，无论你要部署到哪个环境，应该始终把 NODE_ENV 设置为 "production" 来获取可用于部署的应用程序。

// .env.sky 文件内容
VUE_APP_MODE=SKY
NODE_ENV=production

GET

• 只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中
• 当你运行 vue-cli-service build 命令时，无论你要部署到哪个环境，应该始终把 NODE_ENV 设置为 "production" 来获取可用于部署的应用程序。

参考