开发环境：一般是本地开发时所使用的环境，改动很频繁

测试环境：较为稳定的版本，一般用于部署测试

生产环境：发布到线上的版本

配置不同环境变量可避免切换不同环境时手动修改项目配置，请求url等，vue项目中可先在package.json文件中这样设置：

"scripts": {
    "dev": "vue-cli-service serve --mode development",  //开发环境
    "dev:test": "vue-cli-service serve --mode test",    //测试环境
    "build:test": "vue-cli-service build --mode test",
    "build": "vue-cli-service build --mode production", //生产环境
  },

这样在启动项目时使用不同命令后通过 process.env.NODE_ENV 就可以判断当前处于什么环境，process.env可直接使用，无需引入

然后可以在项目根目录中新建3个文件:

.env.development

# 开发环境
NODE_ENV = 'development'

# 开发环境，api前缀
VUE_APP_BASE_API = ''

# 开发环境，Url地址
VUE_APP_BASE_URL = 'http://192.168.xxx'

.env.test

# 测试环境
NODE_ENV = 'test'

# 测试环境，api前缀
VUE_APP_BASE_API = ''

#测试环境，Url地址
VUE_APP_BASE_URL = 'http://xxx'

.env.production

# 生产环境
NODE_ENV = 'production'

# 生产环境，api前缀
VUE_APP_BASE_API = '/api'

# 生产环境，Url地址
VUE_APP_BASE_URL = 'http://xxx'

3个文件创建完成，在项目中打印 process.env 可获取文件配置的内容