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+"?"+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("响应失败");console.log(err);//returnerr;});returninstance(config);};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);}如果(sessionStorage.getItem("授权")){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-3.Instances下的index.ts代码如下：import{Instance1}from"@/network/Instances/Instance1";从“@/network/Instances/Instance2”导入{Instance2}；出口{实例1,实例2};6-4.networt中的API.ts代码如下：import{Instance1,Instance2}from"@/network/Instances";exportconstChen=(value:any)=>{returnInstance1({url:"/chen",method:"post",//data:value,//参数传递方法一：缺点（如果在调用这个接口很多地方和参数都修改了，我们需要修改很多地方)data:{password,account,code}//参数传递方式2：推荐的参数传递方式可以改维护良好});};exportconstLogin2=(value:any)=>{returnInstance2({url:"/login",method:"post",data:value,});};7.在root目录下新建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},},“/陈”：{目标：进程。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、本地分享到此结束，希望能帮到你，让我们一起努力，一起走向巅峰
