React应用部署至Vercel后页面无法加载问题求助

问题概述 #

本地执行npm run build可成功构建React+Webpack项目，但部署至Vercel后页面空白，控制台报错：

• Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR（核心问题）
• DevTools failed to load source map: Could not load content for chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/browser-polyfill.js.map: System error: net::ERR_FILE_NOT_FOUND（此为Chrome扩展自身问题，与项目无关，可忽略）

核心原因与解决方案 #

1. 修正Webpack的资源路径配置 #

ERR_HTTP2_PROTOCOL_ERROR多数源于资源路径错误，导致Vercel无法正确加载静态资源：

• 打开webpack.config.js，找到output配置项，将publicPath设为相对路径./：

  output: {
    path: path.resolve(__dirname, 'dist'), // 确保此为你的打包输出目录
    filename: '[name].[contenthash].js',
    publicPath: './', // 关键：改为相对路径
    clean: true,
  }
  

• 本地重新执行npm run build，检查dist目录下的index.html，确认所有资源（JS/CSS）的引用路径是相对路径（如./main.xxx.js）而非绝对路径（如/main.xxx.js）。

2. 配置Vercel部署规则 #

确认Build配置

在Vercel项目的Build & Development Settings中：

• 确保Build Command设置为npm run build
• 确保Output Directory与Webpack的output.path一致（比如dist）

添加SPA路由配置

React单页应用需要所有路由指向index.html，否则会出现页面空白或404。在项目根目录新建vercel.json文件，内容如下：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

3. 调整package.json的homepage配置 #

自定义Webpack的项目中，homepage配置优先级低于Webpack的publicPath，建议：

• 将homepage设为"."，或者直接删除该配置项，避免路径冲突。

4. 本地验证打包结果 #

在部署前，先本地验证打包后的文件是否正常：

• 执行npm run build完成打包
• 进入dist目录，执行npx serve启动本地服务器
• 访问本地服务器地址（默认http://localhost:3000），如果页面正常显示，说明打包无问题，问题出在Vercel部署配置；如果本地也空白，需检查Webpack的入口、HtmlWebpackPlugin等配置是否正确。

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