尝试在 github 页面上发布我的 threejs 项目时无法加载文件

Question

我一直在试验反应三纤维，想在 github 页上发布一个项目。我构建了我的项目并将其部署在页面上。我在控制台中收到无法加载我的文件的错误：

main.bb26e057.js:1 Failed to load resource: the server responded with a status of 404 ()

这是存储库的 link：https://github.com/olvard/repossumtory/tree/main/possumtory ,

这里是 link 页面站点：https://olvard.github.io/repossumtory/possumtory/build/

我试过摆弄不同的文件路径，但我不明白为什么 npm run build 无论如何都会给我不正确的文件路径。

如有任何帮助，将不胜感激。

Answer 1

我建议使用名为 gh-pages 的软件包。这是一种使用 GitHub 的页面功能上传站点的脚本方式，还支持提交时的自定义配置选项。

您只需运行:

npm install gh-pages --save-dev

然后创建一个新文件。在此文件中，只需插入此代码：

var ghpages = require('gh-pages');

ghpages.publish('path-of-dir-to-commit', function(err) {
  if(err) {
   console.log(err);
} else {
 console.log("success");
});

您可以在 npm 站点上阅读更多配置选项，例如命名在未找到时生成的存储库等。

Answer 2

尝试在 React 应用程序的 package.json 中提供 homepage 属性。

在你的情况下，https://olvard.github.io/repossumtory/possumtory/build/ 是开始 url。

因此请修改在您的 package.json 中包含此行。

"homepage": "https://olvard.github.io/repossumtory/possumtory/build/",

编辑：

添加到您的评论中：由于最后一行的 model.js，模型第一次尝试加载失败。

应该是useGLTF.preload('opossum.glb')而不是useGLTF.preload('/opossum.glb')

尝试在 github 页面上发布我的 threejs 项目时无法加载文件

can't load files when trying to publish my threejs project on github pages

node.js

github-pages

reactjs

webpack

react-three-fiber