Vue CLI模式及环境变量配置详解

环境变量

前端项目在开发过程中,通常将其环境分为: 开发环境, 测试环境, 线上环境

环境变量的意义: 在不同的生产环境下可以使用相应的配置变量

如何配置环境变量

你可以在项目的根目录下进行如下配置:

├── .env.development
├── .env.production
└── .env.[mode] // mode可以是你想配置的任意值

环境文件内应该只包含环境变量的 “键 = 值” 对, 且只有NODE_ENV, BASE_URL, VUE_APP_ ,开头的变量才能全局使用
如下所示: .env.production

module.exports = {
  NODE_ENV = 'production' // 生产环境
  VUE_APP_VERSION = '0.0.1'
}

环境变量的使用

你可以在代码中这样访问配置的变量:

process.env.NODE_ENV

你可以配置不同环境下需要使用的默认地址:

module.exports = {
  VUE_APP_BASE_API = 'http://xxx.xxx.xxx.xxx:8080' // 项目的默认地址
}

线上环境

当项目需要打包上线时,执行npm run build会默认使用NODE_ENV = 'production'内的环境变量

模式

你可以根据不同的环境来使用相应的模式, 每一个模式都对应相应的.env.[mode]下的环境配置

举个:chestnut:
package.json

"script": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",(默认 --mode production)
    "build:one": "vue-cli-service build --mode one",
    "build:two": "vue-cli-service build --mode two"
}

相应的根目录下应该包含如下配置:

├── .env.development
├── .env.production
├── .env.one // 对应build:one
└── .env.two // 对应build:two

多个线上环境配置方案

问题: 一般情况下项目开发线上环境只存在一个,而我司情况比较特殊, 项目需在各个厂区上线, 各个厂区使用的数据库, 域名端口皆不相同, 若配置多个线上环境, 每次项目更新都需打包多份代码重新部署

解决方案: 我司通过字符串拼接的方式对项目的基本地址进行拼接, 在入口函数main.js中:

const host = window.location.host  // 获取当前主机名称
const protocol = window.location.protocol // 获取当前URL协议
axios.defaults.baseURL = protocol + '//' + host // 对基本地址进行拼接