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 即可访问

 

posted @ 2020-10-26 23:21  laowang666888  阅读(356)  评论(0编辑  收藏  举报