我们在vue项目根目录添加以下3个文件:
.env.development #本地开发环境
.env.test #部署测试环境
.env.production #部署生产环境
#拓展
.env # 在所有的环境中被载入
.env.local # 在所有的环境中被载入,但会被 git 忽略
环境变量配置规则
一个环境文件只包含环境变量的“键=值”对:
例如
FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value#警告
#不要在你的应用程序中存储任何机密信息(例如私有 API 密钥)!
#环境变量会随着构建打包嵌入到输出代码,意味着任何人都有机会能够看到它。
只有 NODE_ENV
,BASE_URL
和以 VUE_APP_
开头的变量将通过 webpack.DefinePlugin
静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。
想要了解解析环境文件规则的细节,请参考 dotenv,
我们也使用 dotenv-expand 来实现变量扩展 (Vue CLI 3.5+ 支持)。
环境文件加载优先级
为一个特定模式准备的环境文件 (例如
.env.production
) 将会比一般的环境文件 (例如.env
) 拥有更高的优先级。此外,Vue CLI 启动时已经存在的环境变量拥有最高优先级,并不会被
.env
文件覆写。
.env
环境文件是通过运行vue-cli-service
命令载入的,因此环境文件发生变化,你需要重启服务。
在客户端侧代码中使用环境变量
只有以 VUE_APP_
开头的变量会被 webpack.DefinePlugin
静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们:
console.log(process.env.VUE_APP_SECRET)
除了 VUE_APP_*
变量之外,在你的应用代码中始终可用的还有两个特殊的变量:
NODE_ENV
- 会是"development"
、"production"
或"test"
中的一个。具体的值取决于应用运行的模式。BASE_URL
- 会和vue.config.js
中的publicPath
选项相符,即你的应用会部署到的基础路径。
例如
.env.development文件中添加环境变量
NODE_ENV=
development #值为三种中一个development,test,production
VUE_APP_APP=app
VUE_APP_ROOT_PATH=http://localhost.com/home/index
VUE_APP_API=http://api.localhost.com/api/
最后 你可以通过传递 --mode
选项参数为命令行覆写默认的模式。例如,如果你想要在构建命令中使用开发环境变量:
其次在package.json 中 “script”:
添加三种命令
vue-cli-service build --mode development
vue-cli-service build --mode test
vue-cli-service build --mode production
npm run serve 不带--mode默认是 .env.development 中取值.