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是无法匹配到的,必须把.*用括号括起来

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

相关推荐
萌萌哒草头将军3 天前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
xiaoyan20153 天前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite
月下点灯3 天前
✨项目上线后产品要求把应用字体改大点📏怎么办?一招教你快速解决🔧
前端·vite
李重楼3 天前
Vite 默认端口启动被拒绝解决办法
vite
xiaohe06013 天前
👋 一起写一个基于虚拟模块的密钥管理 Rollup 插件吧(三)
vite·rollup.js
streaker3036 天前
Vue3 开发态轻量组件文档方案:基于动态路由 + Markdown
vue.js·vite
Java陈序员6 天前
听歌体验直接拉满!推荐一款高颜值音乐播放器!
vue.js·docker·vite
BIBI20497 天前
Vite 中的 import.meta.env 与通用 process.env.NODE_ENV 的区别与最佳实践
vite·env
Yuner20009 天前
Vite开发:从入门到精通
vite
KiraZz19 天前
【20250909】Vite构建优化指南
vite·前端工程化