vue配置多个后端

vue配置多个后端

1、src/utils/request.js 设置baseURL为空

const service = axios.create({
  baseURL: '', // process.env.VUE_APP_BASE_API
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

2、vue.config.js 配置proxy

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api/usermanage': {
        target: 'http://192.168.17.98:8080', // process.env.VUE_APP_BASE_API_USER,
        changeOrigin: true,
        pathRewrite: {
          '^/api/usermanage': '/api/usermanage'
        }
      },
      '/api': {
        target: 'http://192.168.17.98:8081', // process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }
  }

3、nginx反向代理

location /api/usermanage {
  proxy_pass http://192.168.17.98:8080;
}
location /api {
  proxy_pass http://192.168.17.98:8081;
}

注意：此时api访问路径为：http://192.168.17.98:8080/api/usermanage
若改为proxy_pass http://192.168.17.98:8080/，访问路径将变为：http://192.168.17.98:8080/usermanage