React项目构建后打开index.html显示空白页，已尝试常见方案仍未解决

Hey there, I totally get how frustrating this is when you're just starting out with React—let's work through this step by step to get your build working properly!

1. 修正package.json里的homepage配置 #

你之前尝试添加"homepage": ""，其实这个配置需要设为相对路径才能适配本地打开的场景。修改成这样：

"homepage": "."

然后重新运行npm run build，再试试打开页面。这个配置会让build生成的资源路径都变成相对路径，避免本地file://协议下找不到资源的问题。

2. 不要直接双击打开index.html，用本地服务器访问 #

直接用浏览器打开本地文件（file://协议）会有很多限制，比如路径解析、跨域等问题。推荐用简单的本地服务器来测试build后的文件：

• 用serve工具：先全局安装它（如果没装过）：

  npm install -g serve
  

  然后在项目根目录运行：

  serve -s build
  

  接着访问命令行提示的地址（一般是http://localhost:3000），看看页面能不能正常显示。
• 如果你有Python环境：进入build文件夹，运行：

  # Python 3
  python -m http.server 8000
  # Python 2
  python -m SimpleHTTPServer 8000
  

  然后访问http://localhost:8000即可。

3. 检查React Router配置（如果你的项目用了路由） #

如果你的项目里用了React Router，默认的BrowserRouter依赖HTML5的History API，在file://协议下会失效，导致页面空白。这时候可以换成HashRouter：

// 替换原来的BrowserRouter导入
import { HashRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Router>
      {/* 你的路由组件配置 */}
    </Router>
  );
}

修改后重新build，再用本地服务器访问试试。

4. 验证build资源的路径是否正确 #

打开build/index.html，查看里面引用的JS和CSS文件路径，比如应该是./static/js/main.108757a0.js而不是/static/js/main.108757a0.js（绝对路径）。如果是绝对路径，本地打开时浏览器会从根目录找资源，自然找不到，这时候homepage: "."的配置就能解决这个问题。

关于ESLint提示的小说明 #

你提到的// eslint-disable-next-line是用来忽略单行ESLint警告的，比如某行代码不符合ESLint规则但你确认没问题时，可以在那行上方加这个注释。不过这个和当前的空白页问题无关，先解决核心问题就好~

别担心，这些都是React新手常遇到的问题，多试几次就能掌握啦！

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