环境要求:vue3。 本文不适用于vue2 或在manifest.json中配置。
解决方案:
(1)需要项目的根路径下面新建文件,名称为:vite.config.js;
(2) 将以下代码复制进去:
import {
defineConfig
} from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
export default defineConfig({
server: {
proxy: {
'/devApi': {
target: 'http://192.168.0.1:7272/api',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/devApi/, ''),
},
},
},
plugins: [uni()],
});
(3)配置说明
- /devApi 为项目的基础请求地址,仅用于本地环境,可自定义;
- target 为真正需要访问的接口地址;
- rewrite: 为需要将访问的部分地址的路径换掉。如上配置为将/devApi 换为空字符串。
(4)样例解释(以上配置代码对应环境解释)
本地测试访问配置的地址为(前面无须加http等):
/devApi/login
运行代码到chrome浏览器,控制台network显示的是访问:
http://localhost:XXX/devApi/login;
经过本配置后,实际代理访问的请求地址:
http://192.168.0.1:7272/api/login
注意:本代码仅适用vite和vue3配置。不适用vue2等;
如果上述代码无效,请关闭正在运行项目,再重新运行。
(5)常见问题如下
问题:uni-app设置跨域代理。pathRewrite重写路径在vue2有效、vue3无效。
解决:经检查问题出现在manifest.json中h5字段配置跨域代理,其仅对vue2有效。可代理地址,但pathRewrite无效。
问题:vue2如何配置跨域代理?
解决:方案有两种,参考如下
方案1:manifest.json中配置为:
// manifest.json
{
"h5": {
"devServer": {
"proxy": {
"/devApi": {
"target": "http://192.168.0.1:7272/api",
"pathRewrite": {
"^/devApi": ""
}
}
}
}
}
}
方案2:项目根路径下新建vue.config.js
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/devApi': {
target: 'http://192.168.0.1:7272/api',
pathRewrite: {
'^/devApi': ''
}
}
},
}
}