关于前端:记录Vue配置开发生成环境跨域代理配置

一、我的项目根目录建设 .env 系列文件
.env.developent 模式用于 serve，开发环境，开始环境的时候会援用这个文件中的配置；

.env.production 模式用于 build，线上环境。

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

VUE_APP_BASE_API = '/dev-api' // 可自在更改 

2、生产环境

VUE_APP_BASE_API = '/produce-api' // 可自在更改 

三、axios 封装中配置

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 60000 // 超时
})

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

module.exports = {
  devServer: {
      host: '0.0.0.0',
      open: true,
      proxy: {[process.env.VUE_APP_BASE_API]: {
            target: '指标地址',
            changeOrigin: true,
            pathRewrite: {[`^${process.env.VUE_APP_BASE_API}`]: ''
            }
         }
      },
      disableHostCheck: true
   }
}

留神点：api 接口不再须要拼接地址

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