项目场景:
工作中遇到不同功能模块,使用的接口请求前缀不同,需要配置代理到不同的服务器地址。
问题描述
不同模块接口示例:
代理的域名:http://192.168.1.105:8000
模块1示例接口:http://192.168.1.105:8000/rc-flow/getList(流程相关)
模块2示例接口:http://192.168.1.105:8000/rc-portal-web/rc-portal-api/getList(业务相关)
模块3示例接口:http://192.168.1.105:8000/login/getInfo (登录相关)
注:以上rc-flow、rc-portal-web/rc-portal-api、login为要设置的baseUrl
解决方案:
- 首先新建文件apiType.js
let api = 'VUE_APP_BASE_API' let flow = 'VUE_APP_FLOW_API' let logins = 'VUE_APP_LOGIN_API' export { api, logins, flow }
- 接口调用使用
import request from '@/config/axios' import {share, flow,login} from "@/config/axios/apiType" //登录相关 export const listData = async (query) => { return await request.getOriginal({ url: '/system/dict/data/list', params: query, requestBase: login, }) } //流程相关 export const listData = async (query) => { return await request.getOriginal({ url: '/shareParamter/dumptra/add', params: query, requestBase: flow, }) } //业务相关 export const listData = async (query) => { return await request.getOriginal({ url:'/shareParamter/configcode/list', params: query, requestBase: share, }) }
- 定义环境变量
#.env.development # base api VUE_APP_BASE_API = '/api' VUE_APP_FLOW_API = '/rc-portal-web/rc-portal-api' VUE_APP_LOGIN_API = '/login'
- 在axios封装,请求拦截器中判断设置不同baseURL
/** * @author "" * @description axios初始化 */ const instance = axios.create({ baseURL, timeout: requestTimeout, // withCredentials: true, // 是否携带cookie headers: { 'Content-Type': contentType, }, }) /** * @author "" * @description axios请求拦截器 */ instance.interceptors.request.use( (config) => { // axios中引入多个baseURL switch (config.requestBase) { case 'VUE_APP_BASE_API': config.baseURL = process.env.VUE_APP_BASE_API; break case 'VUE_APP_FLOW_API': config.baseURL = process.env.VUE_APP_FLOW_API; break case 'VUE_APP_LOGIN_API': config.baseURL = process.env.VUE_APP_LOGIN_API; break default: config.baseURL = process.env.VUE_APP_FLOW_API; break } ......... return config }, (error) => { return Promise.reject(error) } )
- 配置代理地址
//vue.config.js module.exports = { publicPath, assetsDir, outputDir, lintOnSave, devServer: { hot: true, port: devPort, open: true, proxy: { [process.env.VUE_APP_BASE_API]: { target: 'http://192.168.1.105:8000/rc-flow', changeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: "", }, }, [process.env.VUE_APP_FLOW_API]: { target: 'http://192.168.1.105:8000/rc-portal-web/rc-portal-api', changeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_FLOW_API]: "", }, }, [process.env.VUE_APP_LOGIN_API]: { target:https://console-mock.apipost.cn/mock/4769c82c-c0bf-4ee3-8574-9096e9e3a59f, changeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_LOGIN_API]: "", }, }, }, client: { overlay: false }, }, }