React项目build后index.html空白，求无需Node.js的前端展示方案

核心原因 #

直接双击打开index.html用的是file://协议，默认打包的资源路径是绝对路径（以/开头），浏览器无法通过本地文件系统正确加载这些资源，导致页面空白。

步骤1：修改打包配置为相对路径 #

Create React App 项目 #

在项目根目录的package.json中添加一行配置：

"homepage": "."

然后重新执行打包命令：

npm run build

自定义Webpack 项目 #

修改webpack.config.js中的output配置，将publicPath设为相对路径：

module.exports = {
  // ...其他配置
  output: {
    // ...其他output配置
    publicPath: "./"
  }
}

重新执行打包命令生成新的build文件夹。

步骤2：验证并分享 #

• 检查新build文件夹里的index.html，所有js、css资源的路径应该是./static/xxx这种相对格式，而非/static/xxx。
• 把整个build文件夹压缩成ZIP包发送给对方，对方解压后直接双击index.html就能正常打开并使用所有功能，无需安装任何工具。

备选方案（针对复杂路由场景） #

如果你的应用用了React Router的BrowserRouter，file://协议可能无法处理路由跳转，这时可以：

1. 把Router改成HashRouter（路由路径会带#，比如/#/about），重新打包后就能在本地正常跳转。
2. 或者你自己用静态文件服务器（比如http-server）启动build文件夹，然后用工具把这个服务打包成跨平台的可执行文件，对方运行后直接在浏览器访问指定端口即可（你需要提前处理，对方无需安装任何东西）。

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