Vite中使用glob导入组件后页面不刷新怎么办？

祖溢酱~ 提问于 2026-02-07 14:53:23 阅读 25

工具

在用Vite+Vue3开发时，我用glob导入了所有组件，但修改组件后页面热更新失效了。明明按了保存，页面就是不刷新，这是为什么呢？

代码是这样写的：


import { globImport } from 'vite-glob';
const components = globImport('./**/*.vue', { importName: 'default' });
Object.values(components).forEach(component => {
  app.component(component.name, component);
});

我试过重启Vite服务器和清除浏览器缓存，但问题依旧。有没有同学遇到过类似情况？是插件配置问题还是代码写错了？

构建工具

我来解答赞 5 收藏

反馈

1 条解答

Newb.巧云 Lv1

你这个问题我也遇到过，其实不是热更新失效，而是组件注册方式导致的。用 glob 导入的方式本身没问题，但你在注册组件时用了 component.name，这会取文件名作为组件名。一旦文件名不变，即使内容变了，Vue 也不会认为这个组件有变化，自然不会触发更新。

建议你改成这样：

import { globImport } from 'vite-glob';

const components = globImport('./**/*.vue', { importName: 'default' });

Object.values(components).forEach((component, index) => {

  app.component(DynamicComponent${index}, component);

});

给组件起个动态名字，比如加上 index，这样每次注册都会用新名字，就不会被 Vue 缓存住了。热更新就能正常生效了。

或者换个思路，用 defineAsyncComponent 动态加载，这样反而更符合 Vue 的响应式哲学。

2026-02-07 15:05