vue中如何区分不同的环境

vue中如何区分不同的环境

我们在vue开发中常常要根据不同的环境区分不同的变量，常见的环境有如下几种：
生产环境：production,
开发环境：development,
测试环境：test。
方式一、手动修改不同的变量

const BASE_URL = ''
const BASE_NAME = 'coder'// const BASE_URL = ''
// const BASE_NAME = 'kobe'// const BASE_URL = ''
// const BASE_NAME = 'james'export { BASE_URL, BASE_NAME }

我们当处于什么环境下，就将什么变量的注释取消。这样做太过于繁琐，并且也不安全。如果我们忘记，当处于生产环境下的，我们使用的是开发环境下的变量，此时就会造成不安全。
方式二、使用来区分

let BASE_URL = ''
let BASE_NAME = ''if (v.NODE_ENV === 'production') {BASE_URL = ''BASE_NAME = 'dmc'
} else if (v.NODE_ENV === 'development') {BASE_URL = ''BASE_NAME = 'dl'
} else {BASE_URL = ''BASE_NAME = 'dlfordmc'
}export { BASE_NAME, BASE_URL }

方式三、编写不同的环境变量配置文件
需要在根目录下编写三个文件：
.env.development

VUE_APP_BASE_URL=
VUE_APP_BASE_NAME=devepmemt

.env.production

VUE_APP_BASE_URL=
VUE_APP_BASE_NAME=production

.st

VUE_APP_BASE_URL=
VUE_APP_BASE_NAME=test

此时在其他地方访问的时候

      console.v.VUE_APP_BASE_URL)   //.v.VUE_APP_BASE_NAME)  //devepmemt

注意：此时必须要加上VUE_APP，访问的时候需要加上