您现在的位置是：网站首页> 编程资料编程资料

vue3动态修改打包后的请求路径的操作代码_vue.js_

2023-05-24 308人已围观

简介 vue3动态修改打包后的请求路径的操作代码_vue.js_

在工作中多多少少会遇到这种情况：项目打包之后，可以再次修改请求后端接口的基础地址。这就需要我们创建一个静态资源里的外部文件来实现了。

具体操作实现

public 文件夹就是存放那些不需要打包的文件，可以直接访问（静态资源），在puclic目录下新增config.js文件

window.g = { // 开发环境 development: { BASEURL: 'http://127.0.0.1:4000', VERSION: '0.0.1', MODE: 'development', NODE_ENV: 'development' }, //生产环境 production: { BASEURL: 'http://127.0.0.1:8002', VERSION: '0.0.1', MODE: 'production', NODE_ENV: 'production' } }

在index.html引入该文件

xxx

在封装的请求文件中对请求路径进行环境判断

import http from "../utils/http"; const baseUrl = () => { return process.env.NODE_ENV === "development" ? (window as any).g.development.BASEURL + "/api" : (window as any).g.production.BASEURL; }; /** * @description: 预案 * */ // 预案列表 export const getPlanList = () => { return http.get(`${baseUrl()}/api/plan/list`); };

打包项目后的dist目录

在这里插入图片描述

我们只需对config.js 中production生产环境中的路径修改便可实现动态修改请求路径

补充：vue打包之后动态修改请求接口方法

1.可以根据自身情况封装获取配置文件接口信息

1.1我在static中新建一个config.json配置文件

{     "DEV_URL":"/apis",//开发模式     "BUILD_URL": "/apis"//打包之后接口 }

2.我在每次请求之前都会获取配置文件，你也可以只获取一次做下判断即可　　

//获取配置文件 async function startApp() {     let API_URL     if(process.env.NODE_ENV=='development'){         let data=await Vue.http.get('/static/config.json')         API_URL=JSON.parse(data.bodyText).DEV_URL     }else{         let data=await Vue.http.get('./static/config.json')         API_URL=JSON.parse(data.bodyText).BUILD_URL     }     return API_URL }

3.我封装的请求接口

async function doGet(url, req, successCallback, errorCallback) {     let service_url=await startApp()      req=filterUndefined(req)     // 每次切换页面时，调用进度条     NProgress.start();     Vue.http.get(service_url + url,{params:req}, {         emulateJSON: true, //允许跨越     }).then(function(response) {         // 在即将进入新的页面组件前，关闭掉进度条         NProgress.done()         // 响应成功回调         successCallback && successCallback(response.data);     }, function(error) {         // 在即将进入新的页面组件前，关闭掉进度条         NProgress.done()         // 响应错误回调         errorCallback && errorCallback(error)     }); }

到此这篇关于vue3动态修改打包后的请求路径的文章就介绍到这了,更多相关vue3打包后请求路径内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：解决vscode Better Comments插件在vue文件中不显示相对应的颜色的问题_vue.js_

下一篇：vue项目打包后部署到服务器的详细步骤_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网