vite proxy同时配置多个代理方式
更新时间：2025年12月04日 14:29:50 作者：W如Q扬
文章介绍如何在前端开发中配置多个代理进行本地mock,以便同时处理开发完成和未开发完成的接口,主要步骤包括修改`.env.development`文件,创建并配置`request-mock.js`文件,以及在`vite.config.js/ts`中添加代理配置
背景
前端开发时会碰到有些后端接口未开发完成，需要进行本地mock，这个时候就需要配置多个代理，开发完成的接口连接本地或者测试环境后端，未开发完成的接口连接本地mock。
实现步骤
修改.env.development
里面一般有一个如下的配置
VITE_APP_BASE_API='/api'
在之后添加一行
VITE_APP_BASE_API_MOCK='/api-mock'
将request.js或者request.ts 一般放在utils目录下，拷贝一份，重命名为request-mock.js或者request-mock.ts
将request-mock.js里面的 VITE_APP_BASE_API 全部替换为 VITE_APP_BASE_API_MOCK
修改vite.config.js/ts，在proxy中添加一个配置如下;
server: {
port: 8888,
host: true,
open: true,
proxy: {
'/api': {
target: 'http://localhost:8889',
changeOrigin: true
}
'/api-mock': {
target: 'http://localhost:8890',
changeOrigin: true
}
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
前端vue-cli项目中使用img图片和background背景图的几种方法
这篇文章主要介绍了前端vue-cli项目中使用img图片和background背景图的几种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
在Vue项目中实现PDF文件预览是许多开发者可能会遇到的需求,尤其是在开发海外后台管理系统时,由于某些用户上传的文件格式为PDF,而Vue本身并不直接支持PDF文件的预览功能,这就需要借助一些第三方的插件或者工具来完成,下面详细地介绍几种在Vue3中实现PDF文件预览的方法2025-03-03
这篇文章主要为大家详细介绍了Vue实现简单的购物车案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了VUE在线调用阿里Iconfont图标库的方法,内容是围绕VUE前端和阿里Iconfont图标库展开的，经历了从网站上东拼西凑图标的时代，大概是15~16年左右我开始解除阿里Iconfont图标库，刚开始就只会下载图标使用，需要的朋友可以参考下2021-10-10
本文主要介绍了el-table嵌套el-popover处理卡顿的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要为大家详细介绍了前端实现Vue组件页面跳转的多种方式,文中的示例代码讲解详细,具有一定的参考价值,有需要的小伙伴可以了解下2024-02-02
这篇文章主要为大家详细介绍了vue-cli之router基本使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要给大家介绍了关于vue中三元表达式的相关资料,众所周知三元表达式用来根据参数的不同执行不同的代码是很方便的,需要的朋友可以参考下2023-09-09
本篇文章主要介绍了vue如何引用其他组件（css和js） ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
vuex 解决报错this.$store.commit is not a function的方法
这篇文章主要介绍了vuex 解决报错this.$store.commit is not a function的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
最新评论