Svelte+Vite环境下无法导入.glb/.gltf文件的解决求助

1. 修正类型声明文件配置 #

不要仅依赖vite-env.d.ts，在src目录下创建单独的类型声明文件（比如src/types/glb.d.ts），写入以下内容：

declare module '*.glb' {
  const src: string;
  export default src;
}

同时检查tsconfig.json的include数组，确保覆盖该类型文件：

{
  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
}

2. 适配google-modelviewer的资源引用方式 #

google-modelviewer无需将GLB文件作为模块导入，直接在组件中使用静态资源路径即可：

<model-viewer
  src="../assets/t-shirt.glb"
  alt="T恤模型"
  auto-rotate
  camera-controls
></model-viewer>

若需动态绑定路径，确保导入语句正确：

<script>
  import tShirtModel from '../assets/t-shirt.glb';
</script>

<model-viewer
  src={tShirtModel}
  alt="T恤模型"
  auto-rotate
  camera-controls
></model-viewer>

3. 确认Vite配置生效 #

在vite.config.js/vite.config.ts中确认assetsInclude配置，之后重启开发服务器：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  assetsInclude: ['**/*.glb']
});

4. 校验文件路径准确性 #

确认assets目录的实际位置：

• 若为SvelteKit项目，资源应放在项目根目录的static/assets下，对应组件中的路径为../assets/t-shirt.glb
• 若为普通Vite+Svelte项目，资源放在src/assets下，组件中路径为../assets/t-shirt.glb
  路径错误会同时触发文件找不到和类型声明错误。

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