vite server正则表达式

vite server支持正则表达式,这样可以在测试时将一些请求模拟转发到本地后端服务的端口。且不会出现跨域的问题。

例如下面的配置,解决了3个问题:

1)API请求URI地址转发到本地后端服务

2)文件资源路径转发到本地后端服务(后端服务上传地址)

3)根目录下所有的txt文件转发到本地后端服务

4)websocket推送转发到本地的推送地址

复制代码
    server: {
      host: '0.0.0.0',
      // https: true,
      hmr: true,
      port: Number.parseInt(env.VITE_APP_PORT, 10),
      /** 跨域设置允许 */
      cors: true,
      /** 端口被占用时,是否直接退出 */
      strictPort: false,
      /** 接口代理 */
      proxy: {
        '^/(api|admin|upload)/': {
          target: 'http://localhost:8080',
          ws: true,
          /** 是否允许跨域 */
          changeOrigin: true
        },
        '^/(.*).txt': {
          target: 'http://localhost:8080',
          ws: true,
          /** 是否允许跨域 */
          changeOrigin: true
        },
        '^/ws': {
          target: 'http://192.168.1.111:15674',
          ws: true,
          /** 是否允许跨域 */
          changeOrigin: true
        }
      }
    },

proxy正则的条件如下,有一些特殊要求:

1)以^号开头的才是正则,否则是普通URI匹配

2)正则里循环匹配必须以分组的方式出现,例如第二条写成常规的^/.*.txt是无法匹配到的,必须把.*用括号括起来

这里记录一笔,怕时间长了忘了

相关推荐
页面魔术12 小时前
[译]专访尤雨溪: 2025年有什么计划?
前端·vue.js·vite
用户740546399430914 小时前
Vite开发服务器遇到大量依赖需要优化导致重启的问题
vite
前端与小赵18 小时前
webpack和vite之间的区别
前端·webpack·vite
给钱,谢谢!1 天前
记录vite引入sass预编译报错error during build: [vite:css] [sass] Undefined variable.问题
前端·css·sass·vite
小遁哥2 天前
vue3接入tailwindcss3
css·vue.js·vite
xiaoyan20154 天前
vue3.5+deepseek+arco+markdown搭建web版流式输出AI模板
vue.js·vite·deepseek
wordbaby4 天前
Vite 中的 Import 打包机制详解
前端·vite
Yvette-W5 天前
【更新中】【React】基础版React + Redux实现教程(Vite + React + Redux + TypeScript)
前端·javascript·react.js·typescript·前端框架·vite·redux
日升5 天前
Vite CVE-2025-30208 安全漏洞
前端·vue.js·vite
Java陈序员5 天前
19K+ Star!一款基于 Vue3 实现的后台管理系统!
vue.js·typescript·vite