2025-08-13 vue3 vite 配置代理 之后如何查看配置之前的路径

方法一:

如果是js 的话 vite.config.js

roxy: {
        [env.VITE_APP_BASE_API]: {
          changeOrigin: true,
          target: env.VITE_APP_TARGET_BASE_API
         //添加如下:
          bypass(req, res, options) {
          // 真实服务地址X-Req-Proxyurl
            res.setHeader("X-Req-Proxyurl", options.target as string);
          },
          configure: (proxy, options) => {
            // 配置后请求的真实接口地址在请求头x-real-url中
            proxy.on("proxyRes", (proxyRes, req) => {
              proxyRes.headers["x-real-url"] =
                new URL(req.url || "", options.target as string)?.href || "";
            });
          },
        },
      },

如果是ts的话
vite.config.ts

proxy: {
        [env.VITE_APP_BASE_API]: {
          changeOrigin: true,
          target: env.VITE_APP_TARGET_BASE_API
         //添加
          bypass(req, res, options) {
          // 真实服务地址X-Req-Proxyurl
            res.setHeader("X-Req-Proxyurl", options.target as string);
          },
          configure: (proxy, options) => {
            // 配置后请求的真实接口地址在请求头x-real-url中
            proxy.on("proxyRes", (proxyRes, req) => {
              proxyRes.headers["x-real-url"] =
                new URL(req.url || "", options.target as string)?.href || "";
            });
          },
        },
      },

请求路径如下:


image.png

方法二:
package.json文件中

  "scripts": {
    //新增如下代码
    "dev1": "vite --mode development --debug",
  },

在终端编译时可以看到


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容