vue中配置多个代理以及对应的axios设置多个路径

• 配置多个代理

   devServer: {
     
        port: 8082,
        hot: true,
        proxy: {
     
        	// 第一个代理配置
            '/api/*': {
     
                target: 'http://xxx.xxx.xx.xx:xxxx/api/',
                pathRewrite: {
     '^/api' : ''},
                changeOrigin: true
            },
            // 第二个代理配置
            '/apisencod/*': {
     
                target: 'http://xxx.xxx.xx.xx:xxxx/apisencod/',
                pathRewrite: {
     '^/apisencod' : ''},
                changeOrigin: true
            }
        }
    },

• 设置多个对应的axios，在 api.js 文件中进行设置

import axios from 'axios';

axios.defaults.timeout = 50000;
// 第一个代理基础路径配置
axios.defaults.baseURL = '/api/xxxx/';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';


// 第二个代理基础路径配置
export const instance = axios.create({
     
    baseURL:'/apisecond/xxxx/'
});
instance.defaults.timeout = 50000;
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

export default axios;

• 调用，可以挂载到 vue 原型上进行调用，也可以直接调用

// 导入需要的文件
import {
     instance} from  '@/api/api.js';

 instance.get('xxxx').then(res => {
     
      console.log(res);
    })