1.开发环境vue+axios+typescript+eslint+prettier2.电脑系统windows10专业版3.在使用vue开发的过程中，我们与data过程中，我一般会选择使用axios，很多小伙伴都在使用。下面分享一下axios打包和vue开发解决跨域。4.安装axiosnpmiaxios-S4-1。后台接口如下：Host1:http://192.168.0.103:8020Interface:/api/loginHost2:http://192.168.0.103:3000Interface:/chen5在根目录下新建一个文件，目录结构如下：----src----.env.development----.env.production----.env.test5-1.env.development代码如下：NODE_ENV='development'//指定当前环境模式VUE_APP_CURRENTMODE='development'VUE_APP_BASE_URL="http://192.168.0.103:8020"VUE_APP_BASE_PL="http://192.168.0.103:3000"VUE_APP_BASE_PLAPI="/chen"VUE_APP_BASE_API="/api"6.记录在src中，新建一个network文件夹，目录结构如下：----src-----network-----Instances（实例集合）-------index.ts（导入实例）------Instance1.ts（实例1）------Instance2.ts（实例2）---api.js（接口封装）6-1.Instances下Instance1.ts的代码如下：importaxiosfrom"axios";exportconstInstance1=(config:Object)=>{constinstance=axios.create({baseURL:process.env.VUE_APP_BASE_PLAPI,timeout:900000,});instance.interceptors.request.use((config)=>{if(config.method==="get"){config.url=config.url+"?"+配置数据；}if(sessionStorage.getItem("Authorization")){config.headers.Authorization="auth"+sessionStorage.getItem("Authorization");}//console.log("拦截请求成功");////控制台日志（配置）；返回配置；},(err)=>{console.log("请求失败");安慰。日志（错误）；});//instance.interceptors.response.use((res)=>{returnres.data;},(err)=>{console.log("responsefailed");console.log(err);//returnerr;});返回实例（配置）；}；6-2。Instances下Instance2.ts的代码如下：importaxiosfrom"axios";importqsfrom"qs";exportconstInstance2=(config:Object)=>{constinstance=axios.create({baseURL:process.env.VUE_APP_BASE_API,超时:900000,});instance.interceptors.request.use((config)=>{if(config.method==="get"){config.url=config.url+"?"+qs.stringify(config.data);}if(sessionStorage.getItem("Authorization")){config.headers.Authorization="auth"+sessionStorage.getItem("Authorization");}////console.log("请求拦截成功");////控制台日志（配置）；返回配置；},(err)=>{console.log("请求失败");控制台日志（错误）；});//instance.interceptors.response.use((res)=>{returnres.data;},(err)=>{console.log("responsefailed");console.log(err);//returnerr;});returninstance(config);};6-3.Instancesindex.ts代码如下：import{Instance1}from"@/network/Instances/Instance1";从“@/network/Instances/Instance2”导入{Instance2}；出口{实例1,实例2};6-4。networt中的api.ts代码如下：import{Instance1,Instancee2}from"@/network/Instances";exportconstChen=(value:any)=>{returnInstance1({url:"/chen",method:"post",//data:value,//传递参数方法一：缺点（如果这个接口调用的地方多，修改了参数，我们需要修改的地方很多）data:{password,account,code}//传参方法二：推荐传参方式，即可以更好的维护});};exportconstLogin2=(value:any)=>{returnInstance2({url:"/login",method:"post",data:value,});};7.在根目录下新建vue.config.js（与package.json同级），代码如下：module.exports={//打包时去掉.map文件productionSourceMap:false,devServer:{proxy:{"/api":{target:process.env.VUE_APP_BASE_URL,changeOrigin:true,ws:true,pathRewrite:{"^/api":process.env.VUE_APP_BASE_URL+process.env.VUE_APP_BASE_API},},"/chen":{target:process.env.VUE_APP_BASE_PL,changeOrigin:true,ws:true,pathRewrite:{"^/chen":process.env.VUE_APP_BASE_PL},},}},chainWebpack:(config)=>{//启用eslint自动修复，关键代码config.module.rule("eslint").use("eslint-loader").loader("eslint-loader").tap((options)=>{options.fix=true;returnoptions;});},};8.请求结果如下：9.本地分享就到这里了，希望对你有所帮助，让我们一起努力，勇攀高峰
