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.hqwc.cn/news/705214.html

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

相关文章

多区域OSPF路由配置

一、基础配置 1.搭建实验拓扑图 2.实验编址 具体如何配置可以看这一篇详细的博文:单区域OSPF实验-CSDN博客 3.分别检查六个路由器的配置: 使用命令display ip interface brief R1的配置 其他大家可以调出来,再与实验拓扑图进行比对&#…

Java中的数组、Set、List、Map类型的互相转换总结

序言 数组、Set、List、Map是Java语言非常常用的几种数据类型,他们之间存在着千丝万缕的联系。关于底层的数据结构我这里就不再多说啦,直接从应用出发,总结他们之间的转换方法,并给出推荐方法。 大家可以点赞收藏等到需要的时候…

【考研数学】进入强化,基础过关《660》不会做怎么办?

做题没思路,说明学习的过程中走了弯路 很多人,按部就班的学习,觉得课我也听了,讲义也看了,怎么别人做题很顺,自己翻开书就一头雾水。搞清楚其中的差别,也就解决了做题没思路的问题。 首先我们…

波搜索算法(WSA)-2024年SCI新算法-公式原理详解与性能测评 Matlab代码免费获取

​ 声明:文章是从本人公众号中复制而来,因此,想最新最快了解各类智能优化算法及其改进的朋友,可关注我的公众号:强盛机器学习,不定期会有很多免费代码分享~ 目录 原理简介 一、初始化阶段 二、全…

【35分钟掌握金融风控策略28】贷中模型体系策略应用

目录 贷中模型体系策略应用 信用模型体系和模型在策略中的应用 反欺诈模型体系和模型在策略中的应用 运营模型体系和模型在策略中的应用 贷中模型体系策略应用 在贷前模型部分已经讲过,贷前开发的很多模型是可以在贷中直接使用的。贷中与贷前的不同点在于&…

webhook 和 API:你了解吗

Webhooks 是许多 API 的补充。通过设置 webhook 系统,系统 B 可以注册接收有关系统 A 某些更改的通知。当更改发生时,系统 A 推送 更改到系统 B,通常是以发出 HTTP POST 请求的形式。 Webhooks 旨在消除或减少不断轮询数据的需要。但根据我的…

软考一年只能考一次吗?24软考各科目考试时间一览表

软考考试次数: 软考高级【系统分析师】及【系统架构设计师】是一年考两次的。 此外,软考中级【软件设计师】和【网络工程师】也是一年考两次的。 其他科目一年都只开考一次,或者上半年开考,或者下半年开考,具体考试…

k8s 二进制安装 优化架构之 部署负载均衡,加入master02

目录 一 实验环境 二 部署 CoreDNS 1,所有node加载coredns.tar 镜像 2,在 master01 节点部署 CoreDNS 3, DNS 解析测试 4, 报错分析 5,重新 DNS 解析测试 三 master02 节点部署 1&#xff0…

DeepSpeed

文章目录 一、关于 DeepSpeed1、DeepSpeed 是什么2、深度学习训练和推理的极致速度和规模3、DeepSpeed 的四大创新支柱1)DeepSpeed 训练2)DeepSpeed 推理3)DeepSpeed 压缩4)DeepSpeed4Science 4、DeepSpeed 软件套件DeepSpeed 库推…

Golang RPC实现-day02

导航 Golang RPC实现一、客户端异步并发多个请求1、 客户端结构体2、 一个客户端,异步发送多个请求,使用call结构体代表客户端的每次请求3、客户端并发多个请求4、客户端接收请求 Golang RPC实现 day01 我们实现了简单的服务端和客户端。我们简单总结一…

景源畅信电商:做抖音有哪些未开发的蓝海领域?

在互联网信息爆炸的今天,抖音已经成为人们获取信息和娱乐的重要渠道。然而,随着用户数量的增加和内容的丰富,抖音的红海竞争也日益激烈。在这样的背景下,寻找还未被充分开发的蓝海领域,对于内容创作者来说,…

思科模拟器--2.静态路由和默认路由配置24.5.15

首先,创建三个路由器和两个个人电脑。 接着,配置两台电脑的IP,子网掩码和默认网关 对Router 0,进行以下命令: 对Router进行以下命令: 对Router2进行以下命令: 本实验完成。 验证:PC…