vite server正则表达式

applebomb2024-10-18 10:18

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

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