Vue3+Vite如何省略文件名导入index.vue组件？

你要的这种直接通过文件夹路径导入组件的需求完全可以实现，问题出在你之前的Vite配置写法不对，下面给你两种可行的方案：

方案一：利用Vite内置的目录解析能力（推荐） #

Vite本身支持导入目录时自动查找index开头的文件，只需要确保配置好文件扩展名的优先级，同时让TypeScript（如果用的话）能识别这种导入方式：

1. 调整Vite配置 #

在vite.config.ts中补充resolve.extensions，把.vue放在扩展名列表的前面，确保优先解析Vue文件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
    // 配置扩展名优先级，让Vite优先查找.vue结尾的index文件
    extensions: ['.vue', '.js', '.jsx', '.ts', '.tsx', '.json']
  }
})

2. 配置TypeScript（可选，但建议做） #

如果你的项目用了TypeScript，需要在tsconfig.json的compilerOptions里添加paths配置，让TS编译器识别这种导入：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

这样配置后，你直接写import MyComponent from '@/path/to/MyComponent'就会自动指向该文件夹下的index.vue，完全不需要额外的正则别名。

方案二：自定义别名规则（不推荐，除非有特殊需求） #

如果你一定要用别名正则来实现，之前的正则写法有问题，正确的正则应该匹配不包含扩展名的路径，并且要注意Vite的别名匹配顺序。修改后的配置如下：

export default defineConfig({
  resolve: {
    alias: [
      {
        find: "@",
        replacement: fileURLToPath(new URL("./src", import.meta.url)),
      },
      // 匹配@开头且结尾无扩展名的路径，替换为对应index.vue
      {
        find: /^@\/(.*)(?<!\.\w+)$/,
        replacement: '@/$1/index.vue'
      }
    ],
    extensions: ['.vue', '.js', '.ts', ...]
  },
})

不过这种方式容易出现匹配冲突（比如某些没有扩展名的文件导入会被错误替换），所以还是方案一更稳妥。

为什么你之前的配置失败？ #

你写的正则/(^(?!.*[.](ts|js|tsx|jsx|vue|)$))/逻辑有问题：它试图匹配不包含指定扩展名的路径，但写法有误，而且Vite的别名匹配是先匹配@的规则，替换后路径已经变成了本地绝对路径，第二个正则的^开头匹配就失效了，自然不会生效。

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