vue前端灵活改变后端地址两种方式

module.exports = {
    interfaceIP: "http://xxxxxx",
    // interfaceIP: "http://xxxxxxx",
};

const interfaceIP = require("./public/config");

devServer: {
    //本机地址
    host: 'localhost',
    //获取port端口
    port: port,
    // 端口配置
    // port: 1888,
    // 反向代理配置
    proxy: {
      //process.env.VUE_APP_BASE_API的参数会读取对应环境变量数据，
      //如读取的数据是'/api',那么意思就是前端请求的/api路径都会被带来到，参数target的地址
      [process.env.VUE_APP_BASE_API]: {
        /* 服务器5866 本地电脑5566 */
        target: interfaceIP.interfaceIP,
        //代理的路径
        // target: process.env.VUE_APP_BACKEND_URL,
        changOrigin: true, // 允许跨域
        ws: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '/'
        }
      }
    }
  }

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
     [process.env.VUE_APP_BASE_API]: {
        /* 服务器5866 本地电脑5566 */
        //代理的路径
       	target: process.env.VUE_APP_BACKEND_URL,
        changOrigin: true, // 允许跨域
        ws: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '/'
        }
      }
    }
  }
};

// .env.development
# 开发环境配置
ENV = 'development'

#设置端口号
port = 8080 

# 前端请求路径
VUE_APP_BASE_API = '/api'

#后端服务器地址不要忘记添加http或https
VUE_APP_BACKEND_URL = http://XXXXXXXXXXX