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

news/2025/1/8 19:50:41/

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.ppmy.cn/news/1458453.html

相关文章

车载电子电器架构 —— 如何理解和使用Update bit

车载电子电器架构 —— 如何理解和使用Update bit 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不…

RAG 场景对Milvus Cloud向量数据库的需求

虽然向量数据库成为了检索的重要方式,但随着 RAG 应用的深入以及人们对高质量回答的需求,检索引擎依旧面临着诸多挑战。这里以一个最基础的 RAG 构建流程为例:检索器的组成包括了语料的预处理如切分、数据清洗、embedding 入库等,然后是索引的构建和管理,最后是通过 vecto…

linux数据备份与恢复

目录 前言 1、数据备份和恢复中的两个关键性指标 2、linux系统的定时任务 1)本地定时任务crontab 在实验测试过程中,遇到多次crontab任务不执行问题 ,总结下来主要有几个方面原因: 2)分布式定时任务系统Jenkins 3、备份存储…

Linux子进程通过“信号”终止父进程

背景指示:守护进程守护进程_amdaemon-CSDN博客 一种方法是通过kill命令发送特定的信号给父进程。如果子进程在其终止处理程序(atexit或sigterm处理程序)中调用kill命令,并且指定父进程的进程ID,那么父进程就可以被终止…

【刷爆力扣之101.对称二叉树-100.相同的树】

101.对称二叉树 1.递归法 递归三部曲 确定递归函数的参数和返回值 因为我们要比较的是根节点的两个子树是否是相互翻转的,进而判断这个树是不是对称树,所以要比较的是两个树,参数自然也是左子树节点和右子树节点。 返回值自然是bool类型…

vue3创建响应式数据ref和reactive的区别

reactive和ref在Vue.js中都是用于创建响应式数据的,但它们之间存在一些区别 定义数据类型不同。ref主要用于定义基本数据类型,如字符串、数字、布尔值等;reactive主要用于定义对象(或数组)类型的数据,但re…

C++:多态-虚函数

C 中的多态性是面向对象编程中的一个重要概念,它允许在运行时选择不同的函数实现,以适应不同类型的对象。 多态的种类 编译时多态性(Compile-time Polymorphism):也称为静态多态性或早期绑定,指在编译时确…

数据仓库与数据挖掘实验练习3-4(实验二2024.5.8)

练习3 1.简单文件操作练习 import pandas as pd # 读取文件 pd.read_csv(pokemon.csv) # 读取 CSV 文件的函数调用,它将文件中的数据加载到 DataFrame 中,并指定了 Pokemon 列作为索引列。 pd.read_csv(pokemon.csv,index_colPokemon)#查看类型 type(p…