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

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

相关推荐
jaywangep12 小时前
vite插件:提取项目中第三方域进行dns-prefetch预连接
性能优化·vite
wordbaby1 天前
加速 Web 应用:资源压缩详解与 Vite + Nginx 实践指南
前端·nginx·vite
huali1 天前
unplugin-https-reverse-proxy 2.0 发布:革新移动端调试体验
前端·开源·vite
sen_shan1 天前
Vue3+Vite+TypeScript+Element Plus开发-22.客制Table组件
vue.js·vue3·vite·element plus·按钮组件·表组件
是二牙2 天前
vue3+vite 多个环境配置
前端·vue3·vite
bnnnnnnnn4 天前
做了个 Vue3 上传大文件的项目,顺手搞懂了 OSS、Pinia 和断点续传
前端·javascript·vite
柚子8164 天前
用transform给vue加点功能
前端·vue.js·vite
ak啊5 天前
Vue3 + Vite4 项目的性能优化配置方案
前端·vue.js·vite
coding随想8 天前
解决前端项目中无法识别 .node 文件的依赖安装问题
前端·webpack·vite
dmy9 天前
后端1小时上手vue开发到上线
前端·vue.js·vite