1.开发环境

1.在vue项目外层查找vue.config.js文件 配置proxy代理

devServer: {
 // 前端启动端口
 port: 80,
 proxy: {
  // 代理监听第一台服务器路径前缀
  '/way1': {
   target: 'http://localhost:8081,
   ws: true,
   changeOrigin: true,
   pathRewrite: {
    '^/way1': '/way1'
   }
  },
  // 代理监听第二台服务器路径前缀
  '/way2': {
   target: 'http://localhost:8082',
   ws: true,
   changeOrigin: true,
   pathRewrite: {
    '^/way2': '/way2'
   }
  } 
 }

2.使用

在写请求时url('/way1/selectInfo')会调用到代理监听第一台服务器

2.部署环境

1.创建config.js

/**

 *  初始化配置文件

 * @param isProduce 是否是生产环境

 */

function initConfig(isProduce) {

  // 基础配置

  const $Config = { name: 'baseConfig', baseUrl: '', uploadFile: '', mock: false }

  // 生产环境

  if (isProduce) {

    $Config.baseUrl = 'http://8.8.8.8:16656/way1/'

    $Config.mock = true

    $Config.loginUrl = "8.8.8.8:16656/way2/"

  }

  return {

    $Config,

  }

}

2.main.js引入方法

const config = initConfig(process.env.NODE_ENV === 'production')

Vue.prototype.$API = new Api(config.$Config)

Vue.prototype.$CFG = config.$Config

3.使用axios单独发送

      axios({

        method: 'post',

        url: this.$CFG.loginUrl + 'user/Login',

        data: formData,

        headers: {},

      })

      .then(res => {})

4.其他接口正常发送