umi项目 (或vuecli项目) 自定义环境变量配置

umi项目自定义环境变量

1. 启动或打包项目时传入变量。这里我们传入自定义变量 REGION，值为 'th'

REGION=th umi dev

2. config.js 内使用 define 透传 (文档：https://umijs.org/config#define )

export default {
  define: { REGION:process.env.REGION }
}

3. 全局使用

console.log(REGION)

 

 vue项目自定义环境变量

1. 启动或打包项目时传入变量。这里我们传入自定义变量 REGION，值为 'th'

REGION=th vue-cli-service serve

2. 在 vue.config.js 里重命名变量名实现穿透。原因是 vuecli 为了干净，限制仅嵌入VUE_APP_开头的变量

(文档：https://cli.vuejs.org/zh/guide/mode-and-env.html )

process.env.VUE_APP_REGION = process.env.REGION 

3. 全局使用

 console.log( process.env.VUE_APP_REGION )

或者

1. 在启动或打包时，直接传入以VUE_APP_开头的变量

VUE_APP_REGION=th vue-cli-service serve

2. 就可以直接全局使用

 console.log( process.env.VUE_APP_REGION )

 

原理：

1. umi 的 config.js 或者 vue-cli 的 vue.config.js 配置文件里的 console 是打印到项目控制台内的，说明配置js文件是跑在服务器侧的代码。并且只有在服务器侧运行的代码才能取到原版process.env。打包完成后放到浏览器执行的代码取不到。

2. 项目内的 utils 等文件 import 的变量如果涉及执行 process.env.REGION ，console 是会发现打印在浏览器端，说明这是在浏览器环境下跑的代码，必然取不到process.env，只能让服务器端那边打包的时候编译成个常量，透传过来。

3. 后端node因为全部都是服务器代码，没有浏览器端代码之分，所以任意位置都可以取process.env。