环境变量

前端项目基于 webpack、vite、rollup 等构建工具实现工程化，工程化配置中存在development和production环境配置。但是此环境配置针对构建工具使用本地开发或打包构建等功能。

我们常在项目中不仅仅development和production两种环境。还存在测试环境和预发布环境。每个环境都有不同的请求接口、第三方 SDK 配置项、CDN 前缀、项目跳转链接等信息。

这个时候我们就需要环境变量去统一维护以上信息。而不是项目中根据当前访问域名或其他相关信息来区分环境。

如下代码所示，项目中需要区分环境的地方，看起来眼花缭乱。如果项目遇到更换域名，接口更换地址等操作，维护困难。根本不想碰。

const host = window.location.host
let api = 'https://api.domain.com'
if (host === 'dev-domain.com') {
  api = 'https://dev-api.domain.com'
} else if (host === 'test-domain.com' || host === 'test2-domain.com') {
  api = 'https://test-api.domain.com'
} else if (host === 'pre-domain.com') {
  api = 'https://pre-api.domain.com'
}

如果我们项目就简单用一句来表示，把与环境相关统一管理是不是清晰明确

const api = process.env.BASE_URL

实现方案

├──src
├── .env          // 公共变量
├── .env.dev      // 本地开发坏境配置文件
├── .env.test     // 测试开发坏境配置文件
├── .env.prod     // 线上开发坏境配置文件
├── package.json
//...

如项目存在更多环境，可以增加.env.[env-name]

基于 Vue CLI 的项目

文档说明 Vue CLImode-and-env

配置项

针对不同环境配置文件增加相应配置项

.env.dev

NODE_ENV = 'development'
# 环境变量
VUE_APP_ENV = 'dev'
# API-URL
VUE_APP_API_URL = 'https://dev-api.domain.com'

.env.test

NODE_ENV = 'production'
# 环境变量
VUE_APP_ENV = 'test'
# API-URL
VUE_APP_API_URL = 'https://test-api.domain.com'

.env.prod

NODE_ENV = 'production'
# 环境变量
VUE_APP_ENV = 'prod'
# API-URL
VUE_APP_API_URL = 'https://api.domain.com'

package.json 增加配置项命令

"scripts": {
  // 使用.env.dev 文件启动项目
  "dev": "vue-cli-service serve --mode dev",
  // 使用.env.dev 文件打包项目
  "build:prod": "vue-cli-service build --mode prod",
  // 使用.env.dev 文件打包项目
  "build:test": "vue-cli-service build --mode test",
},

如存在多个环境，即 vue-cli-service [build|serve] --mode [env-name]

环境变量key需要增加 VUE_APP前缀

vue-cli 需要再环境配置文件中增加NODE_ENV

实际效果

配置好以上内容后，接下来我们看下实际效果

执行npm run dev，打开 localhost:8080

执行npm run build:test，项目打包后，针对dist启动服务，打开浏览器

执行npm run build:prod，项目打包后，针对dist启动服务，打开浏览器

基于 CRA 的项目

cra-env

create-react-app 需要依赖第三方工具库dotenv-cli实现

配置项

安装依赖npm install dotenv-cli —save-dev
环境配置文件增加相应配置项

.env.dev


# 环境变量
REACT_APP_ENV = dev

# API-URL
REACT_APP_API_URL = https://dev-api.domain.com

.env.test

# 环境变量
REACT_APP_ENV = test

# API-URL
REACT_APP_API_URL = https://test-api.domain.com

.env.prod

# 环境变量
REACT_APP_ENV = prod

# API-URL
REACT_APP_API_URL = https://api.domain.com

package.json增加命令


"script": {
  "start": "dotenv -e .env.dev react-scripts start",
  "build:prod": "dotenv -e .env.prod react-scripts build",
  "build:test": "dotenv -e .env.test react-scripts build",
}

如存在多个环境，即 dotenv -e .env.[env-name] xxxx

环境变量key需要增加 REACT_APP前缀

实际效果

配置好以上内容后，接下来我们看下实际效果

执行npm start，打开 localhost:3000

执行npm run build:test，项目打包后，针对build启动服务，打开浏览器

执行npm run build:prod，项目打包后，针对build启动服务，打开浏览器

基于 Vite 的项目

环境变量和模式

配置项

针对不同环境配置文件增加相应配置项

.env.dev

# 环境变量
VITE_ENV = dev

# API-URL
VITE_API_URL = https://dev-api.domain.com

.env.test

# 环境变量
VITE_ENV = test

# API-URL
VITE_API_URL = https://test-api.domain.com

.env.prod

# 环境变量
VITE_ENV = prod

# API-URL
VITE_API_URL = https://prod-api.domain.com

package.json 增加配置项命令此配置同 Vue-CLI

"scripts": {
  "dev": "vite --mode dev",
  "build:test": "vite build --mode test",
  "build:prod": "vite build --mode prod",
}

使用从环境变量中取值不是 process.env 而是 import.meta.env

export const ENV = import.meta.env.VITE_ENV
export const API_URL = import.meta.env.VITE_API_URL

实际效果

配置好以上内容后，接下来我们看下实际效果

执行npm run dev，打开浏览器

执行npm run build:test，项目打包后，针对dist启动服务，打开浏览器

执行npm run build:prod，项目打包后，针对dist启动服务，打开浏览器

项目自定义环境变量模式(vue-cli/cra/vite)

环境变量

实现方案

基于 Vue CLI 的项目

配置项

实际效果

基于 CRA 的项目

配置项

实际效果

基于 Vite 的项目

配置项

实际效果

相关资料