Vite svelte-ts模板导入.svelte组件提示ts(2306)不是模块错误如何解决

DevOps 小满

2026-9-27

解决方案

1. 补充全局Svelte类型声明

在src目录下新建vite-env.d.ts（若已有该文件则追加内容），避免TS无法识别.svelte文件类型：

declare module '*.svelte' {
  import type { ComponentType } from 'svelte';
  const component: ComponentType;
  export default component;
}

2. 补全tsconfig缺失配置

在tsconfig.json的compilerOptions中新增模块解析规则配置：

"moduleResolution": "bundler"

当前配置未指定模块解析规则，适配Vite的打包逻辑需要显式设置为bundler，避免TS解析模块路径时偶发失效。

3. 对齐Vite与TS的路径别名配置

检查vite.config.ts中的resolve.alias配置，确保和tsconfig的paths完全匹配，示例参考：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import path from 'path'

export default defineConfig({
  plugins: [svelte()],
  resolve: {
    alias: {
      '@assets': path.resolve(__dirname, 'src/assets'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@dev': path.resolve(__dirname, 'src/dev'),
      '@libs': path.resolve(__dirname, 'src/libs'),
      '@services': path.resolve(__dirname, 'src/services'),
      '@types': path.resolve(__dirname, 'src/types'),
      '@utils': path.resolve(__dirname, 'src/utils'),
    }
  }
})

仅在tsconfig中配置别名不会被Vite默认完全识别，会出现偶发的路径解析异常。