React-Three-Fiber部署Vercel后点击Order页面崩溃问题求助

1. 修正Public目录下模型的引用路径 #

• 必须使用绝对路径加载模型，不要用相对路径。Vercel会将public目录直接映射到网站根域名下，所以路径应写为/models/你的模型文件名.glb，而非./models/xxx或../public/models/xxx。
• 示例代码：

  const model = useLoader(GLTFLoader, '/models/rocketfin.glb')
  

2. 规范Public目录的文件结构 #

• 模型需放在public根目录的子文件夹中（比如public/models/），避免嵌套过深或使用含特殊字符的文件名/文件夹名，防止路径解析出错。

3. 从src目录加载模型的正确方式 #

若要将模型移至src目录，可通过导入方式让打包工具自动处理路径：

• 先安装@react-three/drei（若未安装）：

  npm install @react-three/drei
  

• 导入并加载模型：

  import { useGLTF } from '@react-three/drei'
  import modelUrl from './assets/models/rocketfin.glb'
  
  // 方式1：使用useLoader
  const model = useLoader(GLTFLoader, modelUrl)
  // 方式2：使用useGLTF
  const model = useGLTF(modelUrl)
  

  这种方式下，Vite/CRA等打包工具会在构建时自动生成正确的资源URL，无需担心部署路径问题。

4. 检查Vercel部署配置 #

• 确保构建命令与本地一致（比如Vite用npm run build，CRA用npm run build）。
• 确认Vercel项目的Output Directory设置正确（Vite默认是dist，CRA默认是build）。
• 若使用自定义vercel.json，排查是否有路由规则错误拦截了模型资源的请求。

5. 清除缓存重新部署 #

在Vercel项目控制台点击Redeploy，勾选Clear build cache后重新构建，避免缓存导致的资源未更新问题。

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