【记录】Vue配置开发/测试/生成环境/跨域代理配置

一、项目根目录建立 .env 系列文件
.env.dev 模式用于开发环境，启用开发环境的时候会引用这个文件中的配置；
.env.test 模式用于测试环境；
.env.production 模式用于生产环境。

二、配置文件
1、开发环境

# 开发环境
NODE_ENV = 'dev'

# api前缀
VUE_APP_BASE_API = '/dev'

# Url地址
VUE_APP_BASE_URL = 'http://192.168.1.1:8080'

2、测试环境

# 开发环境
NODE_ENV = 'test'

# api前缀
VUE_APP_BASE_API = '/test'

# Url地址
VUE_APP_BASE_URL = 'http://xxx.xxx.x.x:8080'

3、生产环境

# 生产环境
NODE_ENV = 'production'

# api前缀
VUE_APP_BASE_API = '/prod'

# Url地址
VUE_APP_BASE_URL = 'http://xxx.xxx.x.x:8080'

三、axios 封装中配置

const service = axios.create({
  //第一种
  baseURL: process.env.VUE_APP_BASE_API,
  //第二种 生产环境不需要代理，其它环境需要代理设置为空
  baseURL: ["production"].includes(process.env.NODE_ENV) ? process.env.VUE_APP_BASE_URL : '',
  timeout: 60000 // 超时
})

// process.env.NODE_ENV //访问环境
// process.env.VUE_APP_BASE_API //访问api前缀
// process.env.VUE_APP_BASE_URL //访问环境url地址

四、vue.config.js 文件中配置跨域代理

module.exports = {
  devServer: {
      host: '0.0.0.0',
      open: true,
      proxy: {
         [process.env.VUE_APP_BASE_API]: {//第一种
            target: process.env.VUE_APP_BASE_URL,
            changeOrigin: true,
            pathRewrite: {
               [`^${process.env.VUE_APP_BASE_API}`]: '',
               //[`^${process.env.VUE_APP_BASE_API}`]: process.env.VUE_APP_BASE_API,//如果接口本来就需要带上这个前戳的话就加上，不替换为空
            }
         },
        '/admin': {//第二种
            target: process.env.VUE_APP_BASE_URL,
            changeOrigin: true,
            pathRewrite: {
               '^/admin': '/admin'//如果接口本来就需要带上这个前戳的话就加上，不替换为空
            }
         },
      },
      disableHostCheck: true
   }
}

五、package.json 文件中的配置

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

//注意：--mode dev 中 dev 名字取决于 .env.dev 的文件名 dev

注意点：api 接口不再需要拼接地址

//配置前：
export const getLogin = (data) => post(`${url}/auth/login`,data);
//配置后：
export const getLogin = (data) => post('/auth/login',data);