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

Question

我一直在试验react three-fiber，并希望在github页面上发布一个项目。我对我的项目进行了构建，并将其部署在页面上。我在控制台中得到一个错误，它无法加载我的文件：

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

以下是指向存储库的链接：https://github.com/olvard/repossumtory/tree/main/possumtory，

以下是页面网站的链接：https://olvard.github.io/repossumtory/possumtory/build/

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

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

Answer 1

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

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

因此，修改将这一行包含在您的软件包.json.中

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

编辑：

添加到您的注释中：由于最后一行的model.js，模型在第一次尝试时无法加载。

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

Answer 2

我建议使用一个名为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网站上阅读更多关于配置选项的信息，例如如果找到非，则命名它生成的回购，等等。