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

相关推荐
小阿技术2 小时前
uniapp制作一个个人页面
uni-app
小阿技术2 小时前
uniapp制作一个视频播放页面
uni-app
小周同学:7 小时前
uni-app获取手机当前连接的WIFI名称
智能手机·uni-app
书山有路勤为径~9 小时前
【解决问题】HBuilderX窗口文字太小
uni-app
qq_4244091921 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
2501_9159184121 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
不知名It水手1 天前
uniapp运行项目到ios基座
ios·uni-app·cocoa
hunzi_11 天前
搭建商城系统
java·uni-app·php
合作小小程序员小小店1 天前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
普宁彭于晏1 天前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue