Vite+Vue3使用import.meta.glob动态加载组件生产环境失效问题

问题原因 #

你错误使用了import.meta.glob的返回值：import.meta.glob执行后会直接返回键为源文件相对路径、值为对应异步导入函数的对象，不需要手动嵌套import(k)。你额外添加的import(k)不会被Vite构建阶段的静态分析识别，生产环境自然无法匹配到打包后的资源路径。

解决方案 #

直接修改main.js的注册逻辑即可，无需调整vite.config.js配置，修改后代码如下：

import { createApp, defineAsyncComponent  } from 'vue'
import App from '@/App.vue'

// 注意你原代码漏了实例创建逻辑，需补上
const app = createApp(App)

const components = Object.assign(
    import.meta.glob("./components/**/*.vue"),
    import.meta.glob("./widgets/**/*.vue")
)

for (const k in components) {
    const name = k.split("/").pop().replace('.vue', '');
    // 直接使用glob返回的异步导入函数，无需手动import
    app.component(name, defineAsyncComponent(components[k]));
}

app.mount('#app')

补充说明 #

• import.meta.glob是Vite提供的构建时静态能力，会自动处理生产环境的路径映射、代码拆分，完全符合你要求的懒加载效果，未被使用的组件不会被打包进生产产物。
• 注意避免components和widgets目录下出现同名.vue文件，同名组件会出现后者覆盖前者的问题。

内容的提问来源于stack exchange，提问作者Alper Aydingül