uni-app+vue3+vite项目代理
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
一.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中,完美解决了这个问题。一直以为是代理弄错了的,原来不是的。
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)