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

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.mzph.cn/bicheng/8669.shtml

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

相关文章

linux部署java1.8(jdk1.8)

两种方式: 方式一 1.输入查找命令: yum -y list java*2.输入安装命令: yum install -y java-1.8.0-openjdk.x86_643.测试是否已经安装: java -version方式二: 点击链接进入官网:https://www.oracle.com/…

Python 全栈体系【四阶】(四十一)

第五章 深度学习 九、图像分割 1. 基本介绍 1.1 什么是图像分割 图像分割(Segmentation)是图像处理和机器视觉一个重要分支,其目标是精确理解图像场景与内容。图像分割是在像素级别上的分类,属于同一类的像素都要被归为一类&a…

ReactFlow的ReactFlow实例事件传参undefined处理状态切换

1.问题 ReactFlow的ReactFlow实例有些事件我们在不同的状态下并不需要,而且有时候传参会出现其它渲染效果,比如只读状态下我们不想要拖拉拽onEdgesChange连线重连或删除的功能。 2.思路 事件名称类型默认值onEdgesChange(changes: EdgeChange[]) >…

pandas快速使用

DataFrame介绍 Dateframe结构和列表类似,区别是对于DataFrame的每一列和每一行均有一个标签。例如以下数据, 上述数据中,日期作为每行的标签。a、b、c、d、e分别是每列的标签 生成连续日期数据 使用方法date_range(),该方法有两…

MySQL部署系列-centos离线安装MySQL

MySQL部署系列-centos离线安装MySQL 文章目录 MySQL部署系列-centos离线安装MySQL1. 查看是否已经安装 Mysql3. 下载官方 Mysql 包3. 下载之后上传到服务器4. 创建用户组5. 创建数据目录并赋予权限6. 修改配置文件 vim /etc/my.cnf7. 初始化数据库(数据库安装)8. 加入到系统服务…

【3dmax笔记】035: 车削修改器

一、车削修改器介绍 车削:图形通过绕轴旋转来创建三维效果。 开放的样条线,车削之后是面片。闭合的样条线,车削之后,是实体。 一、车削修改器实例 绘制高脚杯,首先在前视图绘制如下二维图形。 添加一个车削的修改器…

(六)JSP教程——out对象

out对象是在JSP中经常使用到的对象,它本质上是一个输出流,前面已经多次使用,我们经常使用它的print()和println()方法,这些方法主要用于实现客户端数据的输出。通过out对象也可以直接向客户端发送一个由程序动态生成的HTML文件。 …

关于YOLO8学习(三)训练自定义的数据集

前文 关于YOLO8学习(一)环境搭建,官方检测模型部署到手机 关于YOLO8学习(二)数据集收集,处理 简介 本文将会讲解: (1)如何通过PyCharm,进行训练数据,实现人脸检测 开发环境 win10、python 3.11、cmake、pytorch2.0.1+cu117、pycharm、ultralytics==8.0.134 要特…

牛客NC97 字符串出现次数的TopK问题【中等 哈希+优先级队列 Java/Go】

题目 题目链接: https://www.nowcoder.com/practice/fd711bdfa0e840b381d7e1b82183b3ee 核心 哈希,优先级队列Java代码 import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定,请勿修改,直接返…

[力扣]——387.字符串中的第一个唯一字符

. - 力扣&#xff08;LeetCode&#xff09; class Solution {public int firstUniqChar(String s) {int[] count new int[256];// 统计每个字符出现的次数for(int i 0; i < s.length(); i){count[s.charAt(i)];}// 找第一个只出现一次的字符for(int i 0; i < s.lengt…

QT--day3

1、mywidget.h #ifndef MYWIDGET_H #define MYWIDGET_H #include <QWidget> #include<QIcon> //图标类 #include<QLabel> //标签类 #include<QMovie> //动图类 #include<QLineEdit> //行编辑器类 #include<QPushButton> //按钮类 #include…

protobuf在配置文件管理上的应用

TextFormat::ParseFromString 是 Google Protocol Buffers&#xff08;通常简称为 Protobuf&#xff09;库中的一个函数&#xff0c;用于从文本格式解析消息。Protobuf 是一种用于序列化结构化数据的库&#xff0c;它允许你定义数据的结构&#xff0c;然后自动生成源代码来处理…

【stm-4】PWM驱动LED呼吸灯 PWM驱动舵机PWM驱动直流电机

1.PWM驱动LED呼吸灯 void TIM_OC1Init(TIM_TypeDef* TIMx, TIM_OCInitTypeDef* TIM_OCInitStruct); //结构体初始化输出比较单元 void TIM_OC2Init(TIM_TypeDef* TIMx, TIM_OCInitTypeDef* TIM_OCInitStruct); void TIM_OC3Init(TIM_TypeDef* TIMx, TIM_OCInitTypeDef*…

学习笔记:IEEE 1003.13-2003(POSIX实时与嵌入式规范)

一、文档 在线参考&#xff1a; IEEE 1003.13-2003 免费下载Draft 版本&#xff08;pdf&#xff09;&#xff1a;IEEE Std. 1003.13 二、概念 1、POSIX标准 可移植操作系统接口&#xff08;英语&#xff1a;Portable Operating System Interface&#xff0c;缩写为POSIX&a…

Bugku Crypto 部分题目简单题解

抄错的字符 题目描述&#xff1a; 老师让小明抄写一段话&#xff0c;结果粗心的小明把部分数字抄成了字母&#xff0c;还因为强迫症把所有字母都换成大写。你能帮小明恢复并解开答案吗&#xff1a; QWIHBLGZZXJSXZNVBZW 观察疑似base64解码&#xff0c;尝试使用cyberchef解码…

Springboot+vue项目人事管理系统

开发语言&#xff1a;Java 开发工具:IDEA /Eclipse 数据库:MYSQL5.7 应用服务:Tomcat7/Tomcat8 使用框架:springbootvue JDK版本&#xff1a;jdk1.8 文末获取源码 系统主要分为管理员和普通用户和员工三部分&#xff0c;主要功能包括个人中心&#xff0c;普通用户管理&…

JavaScript异步编程——04-同源和跨域

同源和跨域 同源 同源策略是浏览器的一种安全策略&#xff0c;所谓同源是指&#xff0c;域名&#xff0c;协议&#xff0c;端口完全相同。 跨域问题的解决方案 从我自己的网站访问别人网站的内容&#xff0c;就叫跨域。 出于安全性考虑&#xff0c;浏览器不允许ajax跨域获取…

VBA中类的解读及应用第十二讲:限制复选选择(上)

《VBA中类的解读及应用》教程【10165646】是我推出的第五套教程&#xff0c;目前已经是第一版修订了。这套教程定位于最高级&#xff0c;是学完初级&#xff0c;中级后的教程。 类&#xff0c;是非常抽象的&#xff0c;更具研究的价值。随着我们学习、应用VBA的深入&#xff0…

【数据链路层】以太网基础知识

文章目录 数据链路层初认识以太网 Ethernet 来历以太网发展史和地位以太网分类数据链路层的分层设计 数据链路层初认识 我们可以先打开抓包工具&#xff0c;随便查看某个协议包。会发现所有抓到的包数据链路层基本上都是以太网封装。 因为现在所接触到的网络都是以太网这种网…

阿里云SLB监听虚拟服务器组时,既有部署在k8s容器里的应用,又有部署在ecs机器上的应用,k8s应用无法连接部署在ecs机器上的应用

一、背景 阿里云SLB可以添加多个监听端口&#xff0c;包括http和tcp&#xff0c;但是当被添加的后端应用&#xff0c;既有部署在k8s里&#xff0c;也有部署在ecs机器里。同一个slb下&#xff0c;这种混合方式的监听&#xff0c;会导致部署在k8s应用中的应用无法连接后者&#…