vux-cli3配置vue环境变量

在以前传统前端项目中我们是如何去匹配项目项目的环境的，一般通过公共js然后变量判断去赋值 ，再或者通过当前域名去判断所在的环境，这些行为都是变量所以存在一些不可控的行为
在vue项目中我们可以通过配置环境变量去判断我们当前所在的环境，进入正题

你的项目根目录中的下列文件来指定环境变量：

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

一个环境文件只包含环境变量的“键=值”对：

FOO=bar
VUE_APP_SECRET=secret

模式是 Vue CLI 项目中一个重要的概念。默认情况下，一个 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，一个模式可以包含多个环境变量。也就是说，每个模式都会将 NODE_ENV 的值设置为模式的名称——比如在 development 模式下 NODE_ENV 的值会被设置为 "development"。

你可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量。比如，如果你在项目根目录创建一个名为 .env.development 的文件，那么在这个文件里声明过的变量就只会在 development 模式下被载入。

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量，请在你的 package.json 脚本中加入：

"dev-build": "vue-cli-service build --mode development",

 

实例

 

不同的环境配置不同的请求url

 

 

如果需要其他环境 按照以上描述 创建 .env.[model]文件

 

 

 

需要注意的 是 --model 后面的参数 需要是 .env.[model] 文件 对应的 [model] 

开启本地服务

vue-cli-service serve --mode [mode]

 

开启打包功能

vue-cli-service build  --mode [mode]

 

不同功能不同配置即可

 

配置完成之后通过process.env.VUE_APP_API_URL 即可访问