标签：vue gif bsp ons type 不同 int one col
开发中经常会遇到axios请求涉及到多个请求域，我们打包后也希望不同的请求对应不同的域名
第一步：
在vue项目的根目录下创建2个文件.env.development和.env.production。在开发过程中，项目会自动读取development文件的配置，在打包时项目会自动读取production文件的配置
.env.development文件的配置，注意配置内容必须以VUE_APP开头，其余后缀可以自定义。在这里配置的内容，在项目任何地方都可以通过process.env.VUE_APP_xx读取
NODE_ENV=‘development‘ VUE_APP_URL=‘/api‘ VUE_APP_URL_TWO=‘/jh‘ VUE_APP_URL_THREE=‘/one‘
.env.production文件的配置，注意配置内容必须以VUE_APP开头，其余后缀可以自定义。在这里配置的内容，在项目任何地方都可以通过process.env.VUE_APP_xx读取
NODE_ENV=‘production‘ VUE_APP_URL=‘http://dididi1:8088‘ VUE_APP_URL_TWO=‘http://dididi2:8081‘ VUE_APP_URL_THREE=‘http://dididi3:8080‘
第二步：
axios配置，创建一个axios对象，对每个域名做处理
import axios from ‘axios‘; const http=axios.create({ baseURL:process.env.VUE_APP_URL, timeout:30000 }) //请求拦截，在每个请求发出去之前，针对每个域名做不同的配置 http.interceptors.request.use(config=>{ if(config.requestBase==‘VUE_APP_URL‘){ config.headers[‘Content-Type‘]="application/x-www-form-urlencoded";
}else if(config.requestBase==‘VUE_APP_URL_TWO‘){ config.headers[‘Content-Type‘]="application/json"; config.baseURL=process.env.VUE_APP_URL_TWO; config.data=JSON.stringify(config.data);
}else if(config.requestBase==‘VUE_APP_URL_THREE‘){ config.baseURL=process.env.VUE_APP_URL_THREE; } return config; }) export default http;
使用
//http://localhost:8080/api/xxx2 import http from ‘@/utils/http‘; export const findBaseByIDHttp=function(data){ let params={ method:‘post‘, url:‘/xxx2‘,//写/api后的部分 requestBase:‘VUE_APP_URL‘,//用于拦截器判断 data } return http(params) } export const picrealtransferHttp=function(data) { let params={ method:‘post‘, url:‘/xxx‘, requestBase:‘VUE_APP_URL_TWO‘, data } return http(params); } export const jiaoYiHttp=function(data) { let params={ method:‘get‘, url:‘/xxx‘, requestBase:‘VUE_APP_URL_THREE‘, params:data } return http(params); }
可以发现当在本地启动项目的时候，可以正确转发实现跨域
vue cli4配置多个baseUrl环境，axios涉及多个请求域的情况
标签：vue gif bsp ons type 不同 int one col
原文地址：https://www.cnblogs.com/liuXiaoDi/p/13970178.html
