Vercel部署自动修改JS文件致报错的原因与解决方案

AI 小北

2026-8-26

问题现象

通过Vercel Serverless Functions部署MERN应用，设计逻辑为后端服务返回前端build目录内的静态文件，部署完成后持续出现前端运行报错：
运行报错截图
定位报错代码位置发现，出问题的JS文件头部被插入了7行本地build产物中不存在的代码，本地源码实际从第8行开始，插入的代码直接触发了运行错误：
异常注入代码位置截图

Vercel自动注入代码的原因

这个现象是Vercel默认的响应改写逻辑被错误触发导致的：

未在Vercel配置中显式声明静态资源托管规则时，平台不会将build目录下的JS/CSS等资产识别为可直接返回的静态文件，所有资源请求都会被路由到Serverless Function处理
对Serverless Function返回的响应内容，Vercel默认会自动注入Vercel Speed Insights、Web Vitals性能监控的初始化探针代码，注入逻辑不会校验原文件的模块格式（ESM/CJS）、严格模式语法限制，直接将代码拼接在响应内容头部，就会和打包后的前端代码产生语法冲突
如果项目开启了Edge Runtime适配，注入流程还会额外插入Edge环境兼容代码，会进一步提升报错概率

可行解决方案

按稳定性从高到低排序：

方案1：使用Vercel原生静态托管能力，替代函数返回静态文件的逻辑
这是官方推荐的最稳定方案，不需要大幅改动业务代码：在项目根目录新建vercel.json配置文件，声明前端build目录为静态资源根路径，仅将接口请求路由到Serverless Functions即可，参考配置：
```
{
  "staticDirectory": "build",
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api/$1" }
  ],
  "functions": {
    "api/**/*.js": {
      "runtime": "nodejs18.x"
    }
  }
}
```
配置生效后，Vercel会直接通过CDN托管build目录下的所有静态资产，资源请求不会经过Serverless Function，自然不会触发自动代码注入逻辑。
方案2：全局关闭Vercel的响应自动改写能力
如果必须保留后端返回静态文件的逻辑，可以在vercel.json中关闭自动注入配置，同时给JS类资源添加禁止转换的响应头：
```
{
  "analytics": {
    "enabled": false
  },
  "headers": [
    {
      "source": "/(.*).js",
      "headers": [
        {
          "key": "x-vercel-no-transform",
          "value": "1"
        }
      ]
    }
  ]
}
```
其中x-vercel-no-transform是Vercel平台的专用标识头，添加后平台会完全跳过对匹配响应的内容改写，不会插入任何额外代码。

方案3：在后端响应逻辑中单独添加禁止转换标识
如果不想修改全局配置，也可以在后端返回静态JS文件的逻辑中，手动设置响应头告知Vercel不要改写内容，以Express框架为例：

const path = require('path');
// 静态JS资源返回逻辑
app.get('/static/js/:filename', (req, res) => {
  // 明确设置内容类型，避免被识别为HTML文档
  res.setHeader('Content-Type', 'application/javascript');
  // 禁止Vercel改写响应内容
  res.setHeader('x-vercel-no-transform', '1');
  res.sendFile(path.resolve(__dirname, '../build/static/js', req.params.filename));
});

内容的提问来源于stack exchange，提问作者Aayush