关于前端:记录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);