Next.js项目部署VPS后.gltf模型404未找到问题求助

1. 确认模型文件的实际部署位置 #

• 本地执行npm run build后，检查.next/static或public文件夹（根据你存放模型的目录）内是否存在models/model.gltf，如果构建后文件未被打包，部署后必然找不到
• 若模型放在public目录，部署时要确保整个public文件夹完整上传到VPS的项目根目录，Next.js会自动将public下的文件映射到网站根路径
• 若模型放在src目录下，代码里必须用import引入资源，而非直接写绝对路径，示例：

  import modelUrl from '../models/model.gltf'
  // 后续加载时使用modelUrl作为路径
  

2. 配置服务器的MIME类型 #

• 多数VPS默认Web服务器（Nginx、Apache）未配置.gltf/.glb的MIME类型，导致服务器无法识别这类文件，返回404
• Nginx配置：在站点配置或nginx.conf中添加：

  types {
    model/gltf+json gltf;
    model/gltf-binary glb;
  }
  

• Apache配置：在.htaccess或httpd.conf中添加：

  AddType model/gltf+json .gltf
  AddType model/gltf-binary .glb
  

• 配置完成后重启服务器

3. 修正Next.js路径配置 #

• 若使用Next.js 13+ App Router，确保静态资源路径以/开头（如/models/model.gltf），避免使用相对路径
• 若使用Pages Router，检查next.config.js的assetPrefix配置，不要误加不必要的前缀：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    assetPrefix: '', // 保持为空，除非你是子路径部署
  }
  module.exports = nextConfig
  

4. 检查模型加载代码逻辑 #

• 禁止硬编码localhost路径（如http://localhost:3000/models/model.gltf），统一使用相对路径或Next.js静态资源规范路径
• 使用useLoader加载的示例代码：

  import { useLoader } from '@react-three/fiber'
  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
  
  const Model = () => {
    const gltf = useLoader(GLTFLoader, '/models/model.gltf')
    return <primitive object={gltf.scene} />
  }
  

5. 检查VPS文件权限 #

• 确保models文件夹及.gltf文件的权限允许服务器进程读取，可执行以下命令设置：

  chmod -R 755 /path/to/your/project/public/models
  chmod 644 /path/to/your/project/public/models/model.gltf
  

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