运行serve -s build启动React构建包本地服务无内容渲染且控制台报错

所有报错的核心原因是构建产物的静态资源引用路径配置错误：

• 你当前的项目需要部署在 /React-Portfolio 子路径下，但 create-react-app 默认配置的资源引用路径是站点根路径 /
• 当浏览器请求 xxx.chunk.js、manifest.json 时，服务端找不到对应路径的资源，由于你用了 serve -s 单页应用 fallback 配置，会统一返回 index.html 的内容
• 浏览器将返回的 HTML 文本（首字符为<）当做 JS/JSON 解析，就会抛出Unexpected token '<'的语法错误

1. 配置资源引用根路径
   打开项目根目录的 package.json 文件，添加 homepage 字段：

   // 如果最终部署在域名子路径 /React-Portfolio 下，填写如下值
   "homepage": "/React-Portfolio"
   
   // 如果只是本地测试build产物、或者部署在域名根目录，填写相对路径即可
   // "homepage": "."
   

2. 重新执行构建命令

   npm run build
   

3. 重启静态资源服务

   serve -s build
   

   再次访问即可正常渲染页面。

注意：如果操作完还是报错，可以检查执行 serve -s build 的路径是否是项目根目录，确保 build 文件夹是最新生成的构建产物。

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