时间戳

首页 > 解决方案 > gh-pages 未从 index.html 加载 bundle.js

reactjs - gh-pages 未从 index.html 加载 bundle.js

问题描述

我已经建立了一个 React 项目webpack。我想把这个项目上传到我在 Github 上的用户站点上。我创建了具有 2 个分支的用户站点存储库master- 和gh-pages. 项目结构如下：

 dist
    index.html
    bundle.js
 index.html

该Package.json文件具有以下用于构建和部署的命令。

 "start": "webpack-dev-server --open --mode development --content-base ./dist",
 "test": "npm run lint && npm run security-check && npm run bundle",
 "predeploy": "npm run build",
 "deploy": "gh-pages -d dist"

在开发模式下，项目运行良好。HtmlWebPackPlugin正在将 bundle js 脚本标签插入到dist/index.html. 为了部署到 gh-pages，当我运行 deploy 命令时，代码会在分支 gh-pages 中正确更新。我可以dist在那里看到最新的文件夹文件。

但是用户网站给我404: not found error的是bundle.js.

标签： reactjswebpackgithub-pageshtml-webpack-plugin

解决方案

因此，在对 gh-pages 进行了一些研究之后，我找到了解决方案。对于用户页面，Github 只允许从分支发布。master所以index.html和bundle.js应该存在于 master 分支中，它们将被用作静态资源。

与其他应用程序一样，这有点令人困惑，您可以选择从 master 或 gh-pages 分支构建，或者从 /docs 目录构建。

所以我创建了一个development分支，我的源代码就在那里。我修改了部署命令，将代码从development分支上传到master.

"deploy": "gh-pages -d dist -b master"

推荐阅读