点击index.html打开React App显示空白页面，如何解决？
2026-8-6
React项目打开空白（仅显示“React App”标签）的解决办法
为什么直接双击index.html会空白
这类React项目（尤其是打包后的成品）依赖HTTP协议加载资源，直接用file://协议打开index.html时，绝对路径的静态资源会加载失败，导致页面空白，只有标签页标题是打包时预设的“React App”。
解决步骤
1. 用本地HTTP服务器运行（最通用方案）
方案A：Node.js的http-server工具
- 确保已安装Node.js，打开终端/命令行，进入项目根目录（包含index.html的文件夹）
- 全局安装工具：
npm install -g http-server - 启动服务器：
http-server - 终端会输出访问地址（比如
http://localhost:8080），在浏览器打开这个地址即可正常显示页面。
方案B：Python简易服务器
- 如果你有Python环境，进入项目根目录后：
- Python 3版本：
python -m http.server 8080 - Python 2版本：
python -m SimpleHTTPServer 8080
- Python 3版本：
- 访问
http://localhost:8080即可查看页面。
方案C：VS Code Live Server插件
- 安装VS Code的Live Server插件，打开项目文件夹后，右键点击index.html，选择「Open with Live Server」，插件会自动启动本地服务并打开页面。
2. 若项目是未打包的源码（有src、package.json文件）
- 先安装项目依赖：
npm install - 启动开发服务器：
npm start，浏览器会自动打开开发模式页面，支持实时修改预览。 - 如果打包后出现空白，修改
package.json添加"homepage": "./"字段，再重新打包：npm run build，之后用本地服务器打开build文件夹里的index.html。
其他打开方式
除了本地服务器，也可以将项目文件上传到静态网站托管平台，但新手优先用本地服务器排查和预览更高效。
内容的提问来源于stack exchange，提问作者CodeZip
相关产品推荐
相关产品推荐
