vue .env配置文件使用API

命名格式

以如下方式在根目录创建命名文件，项目加载时自动识别，无需手动控制加载文件

默认环境加载：.env全局默认配置文件，无论什么环境都会加载合并

开发环境加载：.env.development在开发环境下的配置文件

生产环境加载：.env.production在生产环境下的配置文件

测试环境加载：.env.staging在测试环境下的配置文件

层叠特性

全局配置文件: .env

环境配置文件:.env.development .env.production .env.staging

执行顺序：先加载全局配置文件文件，然后加载环境配置文件文件。

例如：在开发环境下

先加载.env文件，然后加载.env.development文件。

优先级：环境配置文件 > 全局配置文件

当全局的配置文件和环境的配置文件有相同配置项时，环境的配置项会覆盖全局的配置项。

类似于CSS样式的层叠优先级，Vue会把后一个加载的文件内容和前面加载的文件内容进行比较，如果存在变量名相同，那么它会采用后一个文件里的变量值为变量的最终值。

文件内容

属性名以VUE_APP_开头，比如VUE_APP_TITlE

文件案例：

文件名：.env.development

# 页面标题(设置属性名)
VUE_APP_TITLE = 管理系统
# 管理系统/开发环境(设置属性名)
VUE_APP_BASE_API = '/dev-api'
# 开发环境配置
ENV = 'development'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

文件加载

在启动Vue项目时，Vue实例根据Node环境变量NODE_ENV的值来选择加载development production或者 staging配置文件，再到目录下找到对应的配置文件的文件名进行读取，在实例根目录下检测到了有env对应的配置文件则自动扫描加载。

环境变量NODE_ENV 的默认值是development

当完成打包后，环境变量NODE_ENV 的值为production

如果想要使用指定的env配置版本可以在package.json中指定。

"scripts": {
  "serve": "vue-cli-service serve --open",
  "build": "vue-cli-service build",
  "build:stage": "vue-cli-service build --mode staging"
},

本地启动 npm run serve 生产环境 npm run build 测试环境npm run build:stage

变量名的使用

在env配置文件中定义的属性，在项目中通过 process.env.属性名 来访问。

// 获取Env数据
getEnv() {
  // 获取设置的全局标题
  console.log(process.env.VUE_APP_TITLE);
  // log: 管理系统
}

使用场景

场景一

Axios根据版本切换配置请求地址的子路径

.env.development

# 管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'

// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
// 例如 https://www.yehuda.vip/。
// 如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。
// 例如，如果你的应用被部署在 https://www.yehuda.vip/dev-api/，
// 则设置 baseUrl 为 /dev-api/。
// axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  // 通过配置文件切换配置请求地址的子路径
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 10000
})