无法导入.svelte组件求助：search.svelte导入失败排查

云原生阿岚

2026-8-24

无法导入本地Svelte文件的问题解决

我最近碰到个问题，没法把search.svelte导入到index.svelte里，具体情况如下：

index.svelte代码

<script lang="ts">
    import Search from "src/routes/search.svelte";
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<Search/>

search.svelte代码

<input type="text">

报错信息

Error: Cannot find module 'src/routes/search.svelte' imported from 'D:/VScode/Repos/Svelte-Endpoints/src/routes/index.svelte'
    at viteResolve (file:///D:/VScode/Repos/Svelte-Endpoints/node_modules/vite/dist/node/chunks/dep-1513d487.js:50354:25)
    at nodeImport (file:///D:/VScode/Repos/Svelte-Endpoints/node_modules/vite/dist/node/chunks/dep-1513d487.js:50389:15)
    at ssrImport (file:///D:/VScode/Repos/Svelte-Endpoints/node_modules/vite/dist/node/chunks/dep-1513d487.js:50284:20)
    at eval (/src/routes/index.svelte:7:37)
    at async instantiateModule (file:///D:/VScode/Repos/Svelte-Endpoints/node_modules/vite/dist/node/chunks/dep-1513d487.js:50330:9)

我搞不懂为啥会出这个问题，这又不是外部库，是本地的.svelte文件。

解决方法

改用相对路径导入：两个文件在同一个src/routes目录下，直接用相对路径就能正确识别，修改导入语句为：
```
import Search from './search.svelte';
```
确认文件位置和拼写：检查search.svelte是否确实和index.svelte在同一文件夹，文件名有没有拼写错误（比如大小写问题，部分系统/模块解析器对大小写敏感）。
配置路径别名（可选）：如果偏好使用绝对路径，需要在项目的vite.config.ts或svelte.config.js里配置路径别名，示例如下：
```
// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  resolve: {
    alias: {
      src: '/src'
    }
  }
});
```
配置后就能用src/routes/search.svelte这种绝对路径导入，但需要重启开发服务器生效。