vue-cli 配置 node_env

发表于 | 分类于 | 评论数： | 阅读次数：

环境变量和模式

在平时开发的过程中会遇到很多环境并对应很多的接口地址,例如在测试环境或者本地环境请求的是测试环境的地址,但是在正式环境,我们请求的是正式环境的后台地址,这时我们就可以通过环境变量进行修改了.

官方文档:环境变量和模式

创建不同的环境文件

在项目的根目录下新建.env 打头的配置文件,例如:

img

在 .env.bata 中文件的内容为:

1
2
NODE_ENV=bata //环境名称
VUE_APP_URL=http://apiUrl //对应的beta环境地址

在 .env.production中的内容为:

1
2
NODE_ENV=production
VUE_APP_URL=http://正式环境地址

需要注意的是 , .env.development 和 .env.production 分别对应 package.json scripts 中的 serve 和 build

配置 package.json

1
2
3
4
5
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-beta": "vue-cli-service build --mode beta"
  }

可以用 mode 来配置不同的模式

使用

yarn build-bata 执行的就是 beta 环境

然后通过 process.env.NODE_ENV 获取环境名；通过 process.env.VUE_APP_URL 获取环境对应的url

img

thank u !