vue 区分不同环境

image.png

// 1、方式一：手动切换不同的环境 (不推荐)
// 开发
// const BASE_URL = 'http://codewhy.org/dev'
// const BASE_NAME = 'codewhy'

// 生产
// const BASE_URL = 'http://codewhy.org/pro'
// const BASE_NAME = 'zx'

// 测试
// const BASE_URL = 'http://codewhy.org/test'
// const BASE_NAME = 'dd'

// 2、方式二：根据process.env.NODE_ENV 区分
// 开发环境：development
// 生产环境：production
// 测试环境：test

let BASE_URL = ''
let BASE_NAME = ''
if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://codewhy.org/dev'
  BASE_NAME = 'codewhy'
} else if (process.env.NODE_ENV === 'production') {
  BASE_URL = 'http://codewhy.org/pro'
  BASE_NAME = 'kobe'
} else {
  BASE_URL = 'http://codewhy.org/test'
  BASE_NAME = 'dd'
}

export { BASE_NAME, BASE_URL }

// 3、方式三：编写不同的环境变量配置文件

// 会识别以如下全局变量

// BASE_URL

// NODE_ENV

// VUE_APP_随意写

方式三：

image.png

image.png

可以在任何地方取值：

console.log(process.env.VUE_APP_BASE_NAME, process.env.VUE_APP_BASE_URL)