我们可以在项目根目录中的下列文件来指定环境变量:
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入,但会被 git 忽略
.env.[mode] # 只在指定的模式中被载入
.env.[mode].local # 只在指定的模式中被载入,但会被 git 忽略
一个环境文件只包含环境变量的“键=值”对,并且必须以VUE_APP开始:
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
了解模式以后,我们可以为对应环境设置相应的环境变量,比如:
为production
设置.env.production
为development
设置.env.development
*为一个特定模式准备的环境文件 (例如.env.production
) 将会比一般的环境文件 (例如.env
) 拥有更高的优先级
如果只需要在本地使用的话,可以在后面加入.local,比如.env.local
,会git 忽略
在客户端侧代码中,可以使用process.env.VUE_APP_*
获取应用
注:process.env.NODE_ENV,获取应用运行模式("development"
、"production"
或"test"
)
process.env.BASE_URL,应用基础路径(vue.config.js
中的publicPath
选项)