React打包后build文件夹index.html用VSCode Live Server打开报错如何解决

• React项目默认打包的静态资源引用为绝对路径：create-react-app脚手架默认生成的打包产物，所有js、css、静态资源的引用路径都是以/开头的绝对路径，当VSCode Live Server的服务根目录不是你项目的build文件夹上级，或者未配置项目路径规则时，会找不到对应资源，触发加载失败报错。
• History路由模式不支持静态服务：如果你项目中使用了BrowserRouter（即History模式的前端路由），该模式需要服务端配置规则，保证所有路由请求都返回index.html文件，而VSCode自带的Live Server是普通静态文件服务，未做对应配置，访问非根路由时会直接返回404报错。

方法1：修改打包路径配置（优先尝试） #

打开项目根目录的package.json文件，新增homepage字段：

"homepage": "."

修改完成后重新执行npm run build命令打包，之后再用Live Server打开新生成的build文件夹内的index.html即可正常访问。
该配置会将打包后的资源引用改为相对路径，适配任意静态文件服务的目录结构。

方法2：适配前端路由配置 #

如果修改路径后仍报错，检查你项目的路由配置：

• 仅本地测试场景：可以将路由组件从BrowserRouter替换为HashRouter，Hash模式路由通过url的hash值实现路由跳转，不需要服务端做额外配置，可直接在静态文件服务上运行。
• 保留History模式场景：不用Live Server启动，直接在项目根目录执行npx serve -s build命令启动本地服务，-s参数会开启单页应用的路由 fallback 配置，所有路由请求都会返回index.html，完美适配History模式路由。

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