uni-app+vue3+vite项目代理

一.uni-app的vue2项目设置代理：

第一步：manifest.json的源码视图中添加如下代码

"h5": {
 	"title": "Test",//标题
 	"devServer": {
 		// "https": true,
 		"port": "5173",//端口号
 		"disableHostCheck": false,
 		"proxy": {
 			"/api": {
 				"target": "https://www.dffdf.com",//目标服务器
 				"changeOrigin": true,//是否跨域
 				"secure": false,
 				"pathRewrite": {//重写
 					"^/api": ""
 				}
 			}
 		}
 	}
 }

二.uni-app的vue3项目中使用了vite就不能用上面那种方法

在项目的根目录中创建一个名为vite.config.js文件，此文件会自动生效，复制以下代码到vite.config.js中：

import {
	defineConfig
} from "vite";

import uni from '@dcloudio/vite-plugin-uni'
export default defineConfig({
	plugins: [
		uni()
	],
	server: {
		host: '0.0.0.0',
		port: 3000,
		// host: true,
		// port: 5173,
		proxy: {
			"/api": {
				target: "https://shop.fdfd.com",
				changeOrigin: true,
				// rewrite: (path) => path.replace(/^\/api/, "/api"),
			},
		},
		// headers: {
		// 	'Access-Control-Allow-Origin': '*',
		// },
	}

});
// Vite中文网：https://vitejs.cn/config/

注意：vue2也可以使用vite.config.js的方法，但是manifest.json中的代理会自动覆盖vite.config.js文件中的。

**

‘‘途中遇到的问题’’：

**
①设置代理前，根目录下的api文件里存放的api接口是可以正常访问的；
②设置代理后，根目录下的api文件里存放的api接口就显示404的错误，无法访问；
最开始一只找不到问题所在，经过一系列的测试新dome终于找到了问题，api文件目录是自定义创建的，项目无法识别，不能把api文件放在根目录下。后来我直接移动到common中，完美解决了这个问题。一直以为是代理弄错了的，原来不是的。