设置 vue 环境变量

​

项目前端使用的是 vue-element-admin 进行的搭建，如果你同样使用的是 vue-element-admin 搭建的前端项目，又刚好想了解环境变量的使用方法，那可以参考此篇文章。

vue-element-admin 4.0 之后是基于 vue-cli 来进行构建，所以所有的环境变量配置都是基于 vue-cli 来实现和控制的。

官方文档

你可以在你的项目根目录中放置下列文件来指定环境变量：

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

 

​

 

 

• development  模式用于 开发环境
• staging          模式用于 测试环境
• production 模式用于 生产环境

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

FOO = bar
VUE_APP_SECRET = secret

注意！！！

环境变量必须以 VUE_APP_ 为开头。如：VUE_APP_API、VUE_APP_TITLE。

在代码中可以通过如下方式获取和使用：

console.log(process.env.VUE_APP_xxxx)

除了 VUE_APP_* 变量之外，在你的应用代码中始终可用的还有两个特殊的变量：

• NODE_ENV - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
• BASE_URL - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

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

vue-cli-service build --mode development

在 package.json 中设置脚本命令：

"scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src"
}