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