Create React App执行npm run build未生成bundle.js部署问题求助
解决方案
- 首先删除你手动添加的
<script src="/build/bundle.js"></script>标签:Create React App(CRA)默认的构建流程会自动将打包后的所有静态资源引用注入到最终生成的build/index.html文件中,不需要你手动指定入口JS路径。你参考的教程里的bundle.js是通用示例,不对应CRA的默认打包产物命名规则。 - 保留你已经添加的SPA路由适配脚本即可:你放在
<head>标签里的GitHub Pages单页应用路由重定向脚本不需要修改,位置也符合要求。 - 确认构建产物正常:执行
npm run build后,打开生成的build文件夹下的index.html,可以看到文件末尾已经自动插入了带哈希值的入口JS引用,格式类似<script src="/static/js/main.xxxxxx.js"></script>,这就是你的应用入口文件,不需要手动修改。 - 如果你部署的GitHub Pages是仓库子路径(即访问地址为
https://<用户名>.github.io/<仓库名>的格式),需要在项目根目录的package.json中添加homepage字段,值为你的GitHub Pages访问地址,示例:
{ "name": "你的项目名", "version": "0.1.0", "homepage": "https://xxx.github.io/xxx-repo", // 其余配置保持不变 }
添加后重新执行npm run build,生成的资源路径会自动适配子路径,避免404问题。
- 部署时只需要将
build文件夹下的所有内容推送到GitHub Pages对应的分支(通常是gh-pages分支)即可,不需要提交整个项目源码。
内容的提问来源于stack exchange,提问作者Hannah
相关产品推荐
相关产品推荐

