uni-app 项目配置代理踩坑

我这一生如履薄冰~2025-12-22 8:26

问题描述：

最近用uni-app+vue3开发一个h5项目，涉及到跨域问题，以为还是跟之前vue2项目一样去修改manifest.json文件配置，所以直接在manifest.json配置文件中配置h5的跨域，使用pathRewrite重写路径时失败，结果居然没有效果。

manifest.json:

javascript 复制代码

"devServer": {
  "port": 9090,
  "proxy": {
    "/dev-api": {
      "target": "http://192.168.2.100:8089",
      "changeOrigin": true,
      "secure": false,
      "pathRewrite": {
        "^/dev-api": ""
      }
    }
  },
  "https": false
},

原因分析：

查了一下大致原因：

vue3使用的是vite进行打包，而uni-app官方文档中在manifest.json配置跨域是使用webpack的。而vite和webpack的跨域重写路径参数是不一样的。有可能是这种原因导致失败的。

解决方案：

所以我们不用去manifest.json 配置文件中进行配置跨域了，直接在根目录添加vite.config.js配置文件配置跨域。

javascript 复制代码

import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";

export default defineConfig({
  plugins: [uni()],
  server: {
    proxy: {
      "/dev-api": {
        target: "http://192.168.2.100:8089",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/dev-api/, ""),
      },
    },
  },
});