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

【【记录】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);

    推荐阅读