React+Three Fiber部署后内容消失及资源路径重复问题求助

1. 调整package.json的homepage字段 #

直接在项目根目录的package.json里添加或修改homepage字段，值设置为你的仓库对应路径：

"homepage": "/portfolio/"

这个配置会让React编译时自动以该路径作为资源的基础前缀，避免重复拼接仓库名称。

2. 用PUBLIC_URL适配开发/生产环境路径 #

加载3D模型等静态资源时，不要硬写固定路径，改用process.env.PUBLIC_URL做动态拼接：

// 错误的硬写路径
const modelUrl = 'portfolio/assets/airplane.fbx'

// 正确写法
const modelUrl = `${process.env.PUBLIC_URL}/assets/airplane.fbx`

开发环境下process.env.PUBLIC_URL是空字符串，路径会自动变成/assets/airplane.fbx，匹配本地开发需求；生产环境会自动替换为/portfolio/，最终路径就是/portfolio/assets/airplane.fbx，不会出现重复。

3. 修正Three Fiber加载器的资源路径 #

如果用useLoader或Three.js原生加载器加载模型，确保传入的URL是拼接好的动态路径：

const airplane = useLoader(FBXLoader, `${process.env.PUBLIC_URL}/assets/airplane.fbx`)

避免加载器解析相对路径时出现错误。

4. 重新编译并部署 #

修改配置后重新执行编译命令：

npm run build

再将新生成的build文件夹推送到gh-pages分支，覆盖旧的部署文件即可。

额外排查点 #

• 打开浏览器控制台的Network标签，检查资源请求路径是否正确，是否存在404报错
• 若使用了React Router，需给BrowserRouter添加basename属性，值与homepage保持一致：

<BrowserRouter basename="/portfolio/">
  {/* 你的路由内容 */}
</BrowserRouter>

内容的提问来源于stack exchange，提问作者xavi4075