如何使用vue 3和vite导入index.vue文件而不指定文件名？

Question

我最近开始开发一个使用 vite 运行的 Vue 3 应用程序，我正在尝试重组目录，以便我可以将组件和相关子组件分组到文件夹中。

我目前正在使用

/path/to/MyComponent/index.vue

导入更高层次的组件，我想编写导入语句而不指定文件名，这样我就可以做这样的事情：

import MyComponent from `@/path/to/MyComponent`

文件结构如下所示：

path
│   
└───to
    │   
    └───MyComponent
        │   index.vue
        │   SubComponent.vue
        │   ...

我尝试使用

resolve.alias

文件中的

vite.config.ts

属性，但没有成功。有人成功实现这个目标吗？

这是尝试之一：

export default defineConfig({
...
resolve: {
    alias: [
        {
            find: "@",
            replacement: fileURLToPath(new URL("./src", import.meta.url)),
        },
        {
            find: /(^(?!.*[.](ts|js|tsx|jsx|vue|)$))/,
            replacement: "$1/index.vue",
        },
    ],
},
...

Answer 1

可能的解决方案

您可以使用索引文件并命名为导入/导出。

为您的组件组创建索引文件：

// src/components/card/index.js

export { default as Card } from './card.vue'
export { default as CardTitle } from './cardTitle.vue'
export { default as CardText } from './cardText.vue'

vite 配置：

将

find

值中的“组件”替换为您要使用的别名，并将

replace

值中的“组件”替换为组件所在的文件夹。

// vite.config.js

resolve: {
  alias: [
    {
      find: /^components(?:(\/[\w\-/]+))?/,
      replace: 'src/components/$1'
    },
  ]
}

从索引导入组件：

<!-- src/pages/myPage.vue -->

<script setup>
import { Card, CardTitle, CardText } from 'components/card'
</script>

正则表达式的可视化：

---

可选的额外步骤

如果您想仅从“组件”导入所有内容，这也是可能的。

在组件文件夹中创建索引文件：

假设您在组件的子文件夹中已经有索引文件。例如：src/组件/卡、src/组件/按钮

// src/components/index.js

export * from './card'
export * from './button'

就是这样，你现在可以这样做：

<!-- src/pages/myPage.vue -->

<script setup>
import { Card, Button } from 'components'
</script>

Answer 2

在尝试了各种方法之后，我找到了与我原来的帖子一致的解决方案，涉及修改

vite.config.ts

文件

resolve.alias

属性。

此外，我还必须修改 tsconfig.json 文件，以确保打字稿编译器也能够解析

index.vue

文件的路径。

这就是我如何实现导入仅引用父文件夹名称的

index.vue

组件：

1. Vite配置

// vite.config.ts

export default defineConfig({
    resolve: {
        alias: [
            {
                find: /@\/components\/((?!.*[.](ts|js|tsx|jsx|vue)$).*$)/,
                replacement: fileURLToPath(
                    new URL("./src/components/$1/index.vue", import.meta.url)
                ),
            },
            {
                find: "@",
                replacement: fileURLToPath(new URL("./src", import.meta.url)),
            },
            // ...

上面的配置代码将告诉vite检查导入语句是否包含with

@/components

并且不以以下任何扩展名结尾：

ts|js|tsx|jsx|vue

。例如。

@/components/MyComponent

。

满足这些条件时，

find

路径将替换为

index.vue

文件夹中

src/components

文件的路径。例如。

@/components/MyComponent/index.vue

。

上述解决方案的唯一限制是它针对特定文件夹（在本例中为

components

文件夹）。但是，我们可以添加更多别名对象来匹配我们想要实现此导入模式的任何其他文件夹。

2.打字稿配置

如果使用 typescript ESLint 将抛出两个错误：

Missing file extension

和

Unable to resolve path to module

。这是因为打字稿编译器不知道上述 vite 配置。

因此我还必须修改

tsconfig.json

文件如下：

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

上面的代码将利用 Typescript 模块解析路径映射将与

@/components/*

匹配的所有内容映射到

./src/components/*

，其中

*

表示

./src/components

内的路径。此路径相对于

tsconfig.json

文件所在位置（由

baseUrl

参数定义）。

如果未找到组件，Typescript 编译器将查看内部

./src/components/*/index.vue

。

Answer 3

我在Vite.js repo中找到了一个讨论，请参考这里。

你可以试试我今天做的插件。