vue中如何区分不同的环境

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

const BASE_URL = 'http://dlfordmc.org/dev'
const BASE_NAME = 'coder'

// const BASE_URL = 'http://dlfordmc.org/prod'
// const BASE_NAME = 'kobe'

// const BASE_URL = 'http://dlfordmc.org/test'
// const BASE_NAME = 'james'

export {
    BASE_URL, BASE_NAME }

我们当处于什么环境下，就将什么变量的注释取消。这样做太过于繁琐，并且也不安