vue中配置多个代理以及对应的axios设置多个路径_vue 本地代理使用两个基础路径

• 配置多个代理

   devServer: {
        port: 8082,
        hot: true,
        proxy: {
        	// 第一个代理配置
            '/api/*': {
                target: 'http://xxx.xxx.xx.xx:xxxx/api/',
                pathRewrite: {'^/api' : ''},
                changeOrigin: true
            },
            // 第二个代理配置
            '/apisecond/*': {
                target: 'http://xxx.xxx.xx.xx:xxxx/apisencod/',
                pathRewrite: {'^/apisecond' : ''},
                changeOrigin: true
            }
        }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 设置多个对应的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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

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

 instance.get('xxxx').then(res => {
      console.log(res);
    })
1
2
3
4
5
6