解决 Node.js curlconverter 库 Vite 打包后 tree-sitter.wasm 404 路径问题

小田测测看

发布于 2026-06-17 19:28:52

420

一、问题现象

1. 使用 Node.js 的 curlconverter 库结合 Vite 构建项目时，执行 npm run build 打包后，通过 npm run preview 本地预览，浏览器控制台 / 网络面板显示 tree-sitter.wasm 文件请求返回 404 错误；
2. 实际打包后 tree-sitter.wasm 真实存放路径为 http://localhost:4173/curl-converter/tree-sitter.wasm，但库发起的请求路径却是 http://localhost:4173/tree-sitter.wasm（根路径），路径不匹配；
3. 尝试常规解决方案（调整 Vite 路径配置、设置 locateFile 参数、配置 window.Module）均无效，问题持续存在。

二、根因分析

1. 底层依赖逻辑写死：curlconverter 依赖的 web-tree-sitter 基于 Emscripten 编译，其内部 Parser.init 方法硬编码了 tree-sitter.wasm 的请求路径（强制从根目录加载），无法通过常规配置覆盖；
2. Vite 路径机制冲突：Vite 的静态资源挂载逻辑会将文件部署到 /curl-converter/ 子路径下，但 web-tree-sitter 的请求逻辑绕过了 Vite 的路径管理系统，导致请求路径与文件实际存放路径不匹配；
3. 常规配置（如 locateFile、Vite base 配置）无法干预 Emscripten 编译代码的底层请求行为，进一步加剧了路径错位问题。

三、解决方案

核心思路

绕过库和 Vite 的配置限制，直接拦截浏览器底层的 fetch 请求，在请求发送前强制修正 tree-sitter.wasm 的路径。

具体实现

将以下代码放入项目 index.html 的 <head> 标签最顶部（必须在所有 JS 加载前执行）：

<script>
  (function() {
    // 1. 定义文件实际存放的子路径（与打包后路径一致）
    constREPO_NAME = '/curl-converter/';
    
    // 2. 备份浏览器原生 fetch 方法
    const originalFetch = window.fetch;
    
    // 3. 重写 fetch 方法，拦截并修正 WASM 请求路径
    window.fetch = function(input, init) {
      let url = (typeof input === 'string') ? input : input.url;

      // 4. 匹配 tree-sitter.wasm 请求，且路径不含目标子路径时修正
      if (url.includes('tree-sitter') && url.endsWith('.wasm') && !url.includes(REPO_NAME)) {
        // 提取文件名，拼接正确路径
        const fileName = url.split('/').pop();
        const correctedUrl = REPO_NAME + fileName;
        
        console.warn('检测到 WASM 路径异常，已重定向:', url, '->', correctedUrl);
        
        // 执行修正后的请求
        returnoriginalFetch(correctedUrl, init);
      }
      
      // 非 WASM 请求，执行原生 fetch
      returnoriginalFetch(input, init);
    };
  })();
</script>

验证步骤

1. 重新打包并预览：

npm run build
npm run preview

2. 打开浏览器控制台（F12），查看是否有黄色警告：检测到 WASM 路径异常，已重定向:...；

3. 切换到「Network」面板，确认 tree-sitter.wasm 请求的状态码为 200（而非 404）。

兜底检查（若仍 404）

1. 确认 dist 根目录下存在 tree-sitter.wasm 文件；若缺失，从 node_modules/curlconverter/dist/ 手动拷贝该文件到项目 public/ 目录后重新打包；
2. 确认访问地址为 http://localhost:4173/curl-converter/（末尾必须带斜杠）。