如何通过路径插值在Vite中导入Vue组件？

基础动态异步组件导入 #

如果你想通过动态路径导入单个异步组件，直接用defineAsyncComponent包裹动态导入函数即可，但要保证Vite能静态识别路径范围：

import { defineAsyncComponent } from 'vue'

// 固定路径前缀，Vite会预打包components目录下所有.vue文件
const loadAsyncComponent = (componentName) => {
  return defineAsyncComponent(() => import(`../components/${componentName}.vue`))
}

批量导入组件列表 #

如果需要批量导入某目录下的所有组件并转为异步组件，可以结合Vite的import.meta.glob语法实现：

1. 获取目录下的组件文件
   import.meta.glob会返回一个包含匹配文件路径和对应导入函数的对象：

// 匹配components目录及所有子目录下的.vue文件（可调整通配符范围）
const componentFiles = import.meta.glob('../components/**/*.vue')

2. 转换为异步组件集合
   遍历文件对象，将每个导入函数包装为defineAsyncComponent，同时提取组件名：

import { defineAsyncComponent } from 'vue'

const asyncComponents = Object.fromEntries(
  Object.entries(componentFiles).map(([filePath, importFn]) => {
    // 从文件路径提取组件名，示例：'../components/Form/Input.vue' → 'Input'
    const componentName = filePath.split('/').pop().replace('.vue', '')
    return [componentName, defineAsyncComponent(importFn)]
  })
)

3. 注册并使用组件
   你可以全局注册所有异步组件，也可以在局部组件中按需调用：

// 全局注册示例
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
Object.entries(asyncComponents).forEach(([name, component]) => {
  app.component(name, component)
})

app.mount('#app')

关键注意事项 #

• 动态导入路径不能完全无静态前缀，比如import(${path}.vue)这种完全动态的写法不被支持，必须保留部分静态路径（如../components/${name}.vue），否则Vite无法静态分析需要打包的文件。
• import.meta.glob的通配符**匹配子目录文件，*仅匹配当前目录文件，可根据需求调整。

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