配置Vite自动导入index.vue时，模块类型声明未找到及跳转失效如何解决？

我修改了vite.config.ts配置，让Vite将index.vue文件识别为文件夹入口点，配置代码如下：

import { fileURLToPath, URL } from 'node:url'

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    extensions: ['.js', '.ts', '.vue', '.json'] // 新增配置行
  },
  server: {
    port: 3000
  }
})

配置生效后，我可以通过import MyComponent from '@/components/MyComponent'自动导入MyComponent文件夹下的index.vue（该文件夹包含index.vue及子组件），但IDE会抛出错误：

"Cannot find module '../components/MyComponent' or its corresponding type declarations.ts-plugin(2307)"

同时无法跳转至index.vue的定义位置。

解决方案

调整文件夹结构并新增导出文件后解决了问题：

• 将组件文件夹结构调整为：FencyComponent目录下包含FencyComponent.vue主组件及子组件文件
• 在FencyComponent目录下新增index.ts文件，用于导出主组件：

// index.ts
import FencyComponent from './FencyComponent.vue'
export default FencyComponent

现在通过import FencyComponent from '@/components/FencyComponent'导入组件时，IDE不再报错，且能正常跳转至组件定义。

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