Vercel部署Svelte项目报错：bundle.js返回HTML致语法错误

算力阿峰

2026-6-26

Svelte+Rollup部署Vercel后bundle.js返回HTML的解决方案

问题根源

Vercel默认会将未匹配到实际文件的请求重定向到index.html，你的项目中存在路径不匹配的问题：

Rollup将编译后的js/css输出到build根目录
index.html中引用资源的路径带了/build前缀，导致Vercel无法找到对应文件，最终返回index.html内容，引发Unexpected token '<'语法错误。

修复步骤

1. 修正资源引用路径

修改public/index.html（或被复制到build/index.html的原文件）中的资源引用，去掉/build前缀：

<!-- 原代码 -->
<link rel="stylesheet" href="/build/bundle.[hash].css">
<script defer="" src="/build/bundle.[hash].js"></script>

<!-- 修改后 -->
<link rel="stylesheet" href="/bundle.[hash].css">
<script defer="" src="/bundle.[hash].js"></script>

2. 添加Vercel路由配置

在项目根目录创建vercel.json，明确静态资源的匹配规则，避免被路由重写覆盖：

{
  "buildCommand": "npm run build",
  "outputDirectory": "build",
  "routes": [
    // 优先匹配bundle开头的js/css文件，直接返回静态资源
    {
      "src": "/(bundle.*\\.(js|css))",
      "dest": "/$1"
    },
    // 其他所有请求重定向到index.html（适配单页应用路由）
    {
      "src": "/(.*)",
      "dest": "/index.html"
    }
  ]
}

3. 验证Rollup配置的输出路径

确保rollup.config.js中的输出路径正确，产物直接输出到build根目录：

output: {
    sourcemap: !production,
    format: 'iife',
    name: 'app',
    file: 'build/bundle.[hash].js' // 正确，输出到build根目录
},
// CSS输出同理
css.write('bundle.[hash].css', !production);