一、环境介绍

1.1、开发环境

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

1.2、测试环境

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

1.3、生产环境

发布到线上的版本

配置不同环境变量可避免切换不同环境时手动修改项目配置，请求前缀、请求url等

二、如何配置

vue项目中可先在package.json文件中这样设置：

"scripts": {
    "dev": "vue-cli-service serve --mode development",  //开发环境  
    "build:test": "vue-cli-service build --mode test", //测试环境
    "build:prod": "vue-cli-service build --mode production", //生产环境
    "build": "vue-cli-service build", //build指令不加mode默认生产环境
  },

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

三、项目根目录中新建3个文件

3.1、.env.development

# 开发环境
NODE_ENV = 'development'
 
# 开发环境，api前缀，用于axios的baseUrl开启本地服务器代理
VUE_APP_BASE_API = '/dev-api'

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

3.2、.env.test

# 测试环境
NODE_ENV = 'test'
 
# 测试环境，api前缀
VUE_APP_BASE_API = '/test-api'
 
#测试环境，Url地址
VUE_APP_BASE_URL = 'http://xxx'

3.3、.env.production

# 生产环境
NODE_ENV = 'production'
 
# 生产环境，api前缀
VUE_APP_BASE_API = '/prod-api'
 
# 生产环境，Url地址
VUE_APP_BASE_URL = 'http://xxx'

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

四、根据process.env.VUE_APP_BASE_API配置代理

process.env.VUE_APP_BASE_API可以在不同环境根据上述三个文件配置读取不同的值

4.1、为axios添加baseURL

找到axios请求二次封装文件，为axios添加baseURL

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 10000
})

4.2、找到vue.config.js文件配置本地服务器代理devServer

 // webpack-dev-server 相关配置
  devServer: {
    host: "0.0.0.0",
    port: port,
    open: false,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        // 服务器
        target: `http://192.168.1.46:8080`,
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: "",
        },
      },
    },
    disableHostCheck: true,
  },

4.3、生产环境的代理如何配置？

当项目打包到生产环境以后，不会走我们的devServer本地服务器代理，而是走nginx代理，原理都一样（服务器之间不存在跨域问题，只有浏览器和后端服务之间存在跨域问题）

image.png