uniapp + vue3 设置 axios proxy 代理,并重写路径

news2024/11/18 5:37:08

uniapp + vue2 设置代理如下:

已生成的项目架构里面找到manifest.json文件,通过源码视图的方式打开文件,在文件中添加一下代码即可完成代理:

"h5": {
	"devServer": {
		"disableHostCheck": true, //禁止访问本地host文件
		"port": 8000, //修改项目端口
		"proxy": {
			/**配置服务器路径**/
			"/api": {
				"target": "https://api.xxx.com",// 目标服务器
				"changeOrigin": true,
				/**重写路径**/
				"pathRewrite": {
					"^/api": ""
				}
			}
		}
	}
}

但是注意,这仅限于使用的是vue2,现在新项目都是vue3,因此这个写法作废了,

看下官方怎么说,事情的本质官方说的比较明白了:


uni-app 中 manifest.json->h5->devServer,vue2 实际上对应 webpack 的 devServer,

vue3 实际上对应 vite 的 server,鉴于 manifest 为 json 文件,

故 webpack.config.js->devServer 及 vite.config.js->server 配置项下的简单类型属性均可在manifest.json->h5->devServer节点下配置,

funciton 等复杂类型暂不支持。

官方链接:https://uniapp.dcloud.net.cn/collocation/manifest.html#devserver
在这里插入图片描述
也就是说vue2用的是webpack,vue3用的是vite,因此要用vue3 + vite的方式来配置这个proxy,

但是在vite中,重写路径是通过函数来做的,上面uniapp说了不支持函数写法,所以只能换另一种方式,不在uniapp的文件中配。

在这里插入图片描述

Vue3的方式

在项目根目录下面创建一个名为vite.config.js的文件(如果不存在),在文件中编辑一下内容即可:

这里就是直接新建vite文件来操作使用即可啦。

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
 
export default defineConfig({
	plugins: [
		uni()
	],
	server: {
		port: 3000,
		proxy: {
			'/api': {
				target: 'https://api.xxx.com', // 目标服务  
				changeOrigin: true,
				rewrite: path => path.replace(/^\/api/, ''),
			}
		}
	}
})

在这里插入图片描述

参考了:https://blog.csdn.net/m0_53536475/article/details/130144830

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1655826.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

搜维尔科技:OptiTrack是基于LED墙虚拟制作舞台的最佳选择

OptiTrack因其绝对精度、易用性、可靠性以及与现场工具的完美集成而被选中&#xff0c;仍然是全球首屈一指的基于 LED 墙的虚拟制作舞台的选择。 当今虚拟制作阶段的低延迟、超精确摄像机跟踪标准 /- 0.2 毫米 位置精度1 < 10 毫秒 系统延迟 /- 0.1 度 旋转精度2 电影…

Windows电脑搭建HarmonyOS NEXTDeveloper Preview2环境详解

Windows电脑搭建HarmonyOS NEXTDeveloper Preview2环境详解&#xff1a; HarmonyOS NEXT Preview系列教程基于Api11讲解-IT营大地老师 1 、电脑要求以及注意事项 操作系统 &#xff1a; Windows10 64 位、 Windows11 64 位 内存 &#xff1a; 8GB 及以上&#xff0c;推荐 16G…

基于springboot实现公交线路查询系统项目【项目源码+论文说明】计算机毕业设计

基于SpringBoot实现公交线路查询系统演示 摘要 社会发展日新月异&#xff0c;用计算机应用实现数据管理功能已经算是很完善的了&#xff0c;但是随着移动互联网的到来&#xff0c;处理信息不再受制于地理位置的限制&#xff0c;处理信息及时高效&#xff0c;备受人们的喜爱。本…

解决在C#中方向键对控件焦点的控制

不要犹豫直接把下面这个程序复制进去就好了&#xff0c;不用担心0个引用&#xff0c;哈哈&#xff0c;可以的 public partial class MainForm : Form {public MainForm(){InitializeComponent();}protected override bool ProcessDialogKey(Keys keyData){// 检查是否是方向键…

RoNID:通过生成可靠标签与聚类友好型表征来实现新意图的发现

论文地址&#xff1a;https://arxiv.org/abs/2404.08977 原文地址&#xff1a;intents-are-not-going-away-ronid-is-a-new-intent-discovery-framework 2024 年 4 月 26 日 Robust New Intent Discovery&#xff08;RoNID&#xff09;框架致力于在开放域场景中识别已知意图并合…

Windows录屏怎么录?3个方法教会你

在Windows操作系统中&#xff0c;Windows录屏功能已经成为了许多用户日常工作与生活的必备工具。无论是教学演示、游戏直播&#xff0c;还是会议记录、视频教程制作&#xff0c;Windows录屏软件都能帮助我们轻松捕捉屏幕上的精彩瞬间。 本文将为您带来3种Windows录屏的方法&am…

1553B总线接口仿真卡,1553B IP核,适用于航空机载,飞机综合航电等领域

1553B总线接口卡可作为通讯或仿真测试板卡使用&#xff0c;支持USB&#xff0c;PCI&#xff0c;PXI&#xff0c;CPCI&#xff0c;以太网&#xff0c;RS422&#xff0c;RS485等计算机总线平台&#xff0c;单功能&#xff08;1个BC、0-31个RT和1个BM&#xff0c;当前仅可单工作模…

大模型相关技术-初识RAG

这个时候如果想对用户输入做一些过滤、对某种回答有了固定的答案怎么办呢&#xff1f;java程序员肯定就会想到写个filter或者intercepter&#xff0c;RAG就是在做类似的事情&#xff0c;只不过流程更加复杂。 RAG是什么 检索增强生成&#xff08;RAG&#xff09;是对大型语言…

c++:优先级队列(priority queue)使用及底层详解,附带仿函数初步使用

文章目录 优先级队列的使用大堆小堆**注意** 优先级队列的模拟实现pushpopsizeemptytop 仿函数仿函数是什么pushpop 仿函数结合优先级队列的优势 优先级队列的使用 优先级队列本质是就是完全二叉树,是个堆.我们可以用优先级队列来取出一段序列中的前N个最大值. priority_queue…

【k8s多集群管理平台开发实践】十二、开发总结及注意事项【完结】

文章目录 简介总结前面11章节所实现的功能&#xff1a; 一.完善集群更多功能1.1.可以扩展更多的功能 二.该系列课程代码地址三.技术栈及开发经验3.1.开发过程中所使用到的一些技术栈 四.开发过程中需要注意的事项五.反馈与交流 简介 该系列文章主要是介绍了多k8s集群平台开发的…

SF 不消费buffer

1、请求合成请求vsync MessageQueue.cpp 返回nextWakeupTime struct ArmingInfo { nsecs_t mActualWakeupTime; nsecs_t mActualVsyncTime; nsecs_t mActualReadyTime; }; 在schedule 请求vsync 时会根据算法计算出nextVsyncTime时间&#…

【matlab基础知识代码】(十二)逆矩阵与广义逆矩阵

>> Hhilb(4);H1inv(H),norm(H*H1-eye(4))H1 1.0e03 *0.0160 -0.1200 0.2400 -0.1400-0.1200 1.2000 -2.7000 1.68000.2400 -2.7000 6.4800 -4.2000-0.1400 1.6800 -4.2000 2.8000ans 2.8455e-13 矩阵维数较大&#xff0c;警告: 矩阵接近奇…

豆芽机置入语音芯片WTN6040-8S:开启智能生活新篇章,让豆芽制作更便捷有趣

豆芽机的开发背景&#xff1a; 豆芽作为一种营养丰富、味道鲜美的食品&#xff0c;深受广大消费者的喜爱。然而&#xff0c;传统的豆芽生产过程繁琐&#xff0c;需要耗费大量的时间和人力&#xff0c;且存在生产效率低、质量不稳定等问题。随着人们生活节奏的加快和对健康饮食的…

开源即时通讯IM框架 MobileIMSDK v6.5 发布

一、更新内容简介 本次更新为次要版本更新&#xff0c;进行了bug修复和优化升级&#xff08;更新历史详见&#xff1a;码云 Release Notes、Github Release Notes&#xff09;。 MobileIMSDK 可能是市面上唯一同时支持 UDPTCPWebSocket 三种协议的同类开源IM框架。轻量级、高…

django和vue开发的前后端分离网站怎么部署到服务器上,django和vue前后端分离网站怎么通过宝塔部署

提示&#xff1a;如果看完全部教程后仍然部署不成功&#xff0c;可以联系作者 一、提前准备 想要把django vue 前后端分离网站部署到服务器上&#xff0c;有一些提前准备的东西 1、备案域名&#xff08;域名必须备案&#xff09; 这里需要解析两个域名&#xff0c;一个前端&…

������森林消防泵:特点及使用场景 /恒峰智慧科技������

在大自然的怀抱中&#xff0c;森林是地球上最美丽的绿色家园。然而&#xff0c;森林火灾却时常威胁着这片美丽的家园。为了保护森林&#xff0c;我们有幸拥有了一支强大的森林消防泵队伍。今天&#xff0c;就让我们一起来了解一下这些守护者们的故事吧&#xff01; &#xfffd…

从Flutter范儿的单例来看Dart的构造函数

点击上方蓝字关注我&#xff0c;知识会给你力量 单例模式 单例模式应该是设计模式中使用的最广泛的一种设计模式了&#xff0c;在Kotlin中&#xff0c;甚至为它单独创建了一个语法糖——object类&#xff0c;来快速实现单例模式&#xff0c;而在Dart中&#xff0c;并没有像Kotl…

人大金仓数据库报com.kingbase8.util.KSQLException: 致命错误: 用户 “SYSTEM“ Password 认证失败

com.kingbase8.util.KSQLException: 致命错误: 用户 “SYSTEM” Password 认证失败 解决办法&#xff1a; 问题在于用户权限只不足&#xff0c;相关配置文件在一般在 /data/sys hba.conf,修改IPV4 local connections选项中的改为trust。

第1章 信息系统综合知识 1.1 信息的定义和属性

第1章 信息系统综合知识 1.1 信息的定义和属性 1.1.1 信息的基本概念 控制论创始人维纳认为&#xff1a;信息就是信息&#xff0c;既不是物质也不是能量。 信息论的奠基者香农认为&#xff1a;信息就是能够用来消除不确定性的东西。 其他流行说法&#xff1a;信息是事先不…

回归的无分布预测推理

摘要 我们利用保形推理&#xff0c;开发了回归中无分布预测推理的一般框架。所提出的方法允许使用回归函数的任何估计量构建响应变量的预测带。所得的预测带在标准假设下保留了原始估计量的一致性&#xff0c;同时保证了有限样本边际覆盖&#xff0c;即使这些假设不成立。我们…