vue正式环境如何能配置多个请求的url？

Question

vue项目 打包放到服务器上之后 如何能做到 模块1 请求www.xxx1.com的接口，模块2请求www.xxx2.com的接口.... ..

这种能实现吗？需要怎么配置 动态配置

Answer 1

想了两个方案，一个是axios创建实例的时候就不同前缀，一个是加入拦截器改写配置。
从长远来说，还是分开比较好。

const axiosInstanceForXXX1 = axios.create({
    baseURL: 'http://localhost:8001/api/',
    timeout: 5000,
});
const axiosInstanceForXXX2 = axios.create({
    baseURL: 'http://localhost:8002/api/',
    timeout: 5000,
});
const response = await axiosInstanceForXXX1.get('/path');
const response2 = await axiosInstanceForXXX2.get('/path');

方案2

instance.interceptors.request.use(
    (config) => {
        let { url } = config;
        // 如果 URL 以 '/module-a' 开头，则修改 baseURL
        if (url && url.startsWith('/module-a')) {
            config.baseURL = 'https://module-a-api.example.com/';
        }
        if (url && url.startsWith('/module-b')) {
            config.baseURL = 'https://module-b-api.example.com/';
        }
        url = url.replace('/module-a/','/')
        config.url = url.replace('/module-b/','/')
        return config;
    },
    (error) => {
        // 处理请求错误
        return Promise.reject(error);
    }
);

调用

import api from "./utils/axios.ts";

api.get('/module-a/xx')
api.get('/module-b/xx')

ps 注意代码健壮性，我就演示一下思路

Answer 2

生产环境，大部分都是通过nginx代理的吧
给对应模块的接口，加个/xxx1前缀，在nginx做前缀过滤再指向不同模块就行

Answer 3

线上发布一般都需要使用nginx反向代理实现不同接口访问不同服务，比如

server {
    listen       8080;
    listen  [::]:8080;
    server_name  localhost;
    location /api1 {
       proxy_pass http://服务网关1;
       proxy_connect_timeout 60s;
       proxy_send_timeout 60s;
       proxy_read_timeout 60s;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For 
      $proxy_add_x_forwarded_for;
    }
    location /api2 {
       proxy_pass http://服务网关2;
       proxy_connect_timeout 60s;
       proxy_send_timeout 60s;
       proxy_read_timeout 60s;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For 
      $proxy_add_x_forwarded_for;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

Answer 4

上生产的话一般都是相对路径请求的，你在页面中模块1的接口一般会有/m1/xxx的标识，模块2的接口也会有/m2/xxx的标识。

开发环境下，你肯定是通过配置代理的方式/m1和/m2开头的API分别代理到不同的服务。同理，在开发环境下，也是如此，不过把vue代理改成了nginx

Answer 5

我一般大概是这样做的，可以参考一下，项目中可能会复杂一点

// 是否开发模式
const isDev = true

const prefixMap = isDev ? {
  'API_01': 'http://192.168.0.199:456',
  'API_02': 'http://192.168.0.211:8080',
} : {
  'API_01': 'https://www.baidu.com',
  'API_02': 'https://www.google.com',
}

export default function request (options) {
  return axios({
    baseURL: prefixMap[options.baseURL],
    url: options.url
  })
}

// 使用自己封装的函数
request({
  baseURL: 'API_01',
  url: '/get/userinfo/'
})