项目规范(五)：环境变量

概述

在开发中，有时候需要根据不同环境来设置不同的环境变量，常见的环境变量有以下三种：

• 开发环境：development
• 生产环境：production
• 测试环境：test

主要以下三种方式来实现区分环境变量

1.手动修改不同的变量

这种方法比较笨重，需要人为的去根据环境改变而更改对应的变量，所以不太推荐使用

export const BASE_URL = 'http://www.xy.org/dev'

// export const BASE_URL = 'http://www.xy.org/pro'

// export const BASE_URL = 'http://www.xy.org/test'

需要用到什么环境就注释其他环境下的变量

2.根据process.env.NODE_ENV的值进行区分

这种方法可以无需人为控制，可自动判断并采用对应变量

let BASE_URL = ''
if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://www.xy.org/dev'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://www.xy.org/pro'
} else if (process.env.NODE_ENV === 'test') {
  BASE_URL = 'http://www.xy.org/test'
}
export { BASE_URL }

3.编写不同的环境变量配置文件

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

然后在对应文件声明对应变量，不过需要注意自定义变量需要VUE_APP开头，详情可见官网VueCli环境变量

VUE_APP_BASE_URL='http://www.xy.org/dev'

然后使用时通过process.env开头

console.log(process.env.VUE_APP_BASE_URL)