使用Vite+TS部署至Vercel时出现404及CSP脚本执行错误

一、404 问题修复（SPA 路由适配） #

即使本地路由正常，Vercel 默认不会处理前端 SPA 路由，需添加配置：

• 在项目根目录新建 vercel.json，写入路由重写规则：

{
  "routes": [
    { "src": "/(.*)", "dest": "/index.html" }
  ]
}

该配置会将所有请求导向入口文件 index.html，确保刷新或直接访问子路由时不会返回 404。

二、CSP 内联脚本错误修复 #

Vite 生产构建可能生成内联脚本，触发 Vercel 默认 CSP 限制，两种解决方式：

方案 1：添加内联脚本哈希到 CSP #

• 打开部署后的页面源码，找到被拦截的内联脚本，计算其 SHA-256 哈希值
• 在项目 index.html 的 <head> 中添加 CSP meta 标签：

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' 'sha256-你的脚本哈希值';">

方案 2：配置 Vite 禁用内联脚本 #

• 修改 vite.config.ts，添加构建配置禁止内联资源：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    assetsInlineLimit: 0, // 禁止所有资源内联
    rollupOptions: {
      output: {
        inlineDynamicImports: false
      }
    }
  }
})

重新构建部署后，所有脚本会打包为独立文件，规避 CSP 内联限制。

三、部署日志排查要点 #

从你提供的部署日志截图，重点确认：

• 构建流程是否无报错完成
• 静态资源是否全部上传至 Vercel
• Vercel 是否正确识别 index.html 作为项目入口

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