Vue3 + Vite4项目中独立.ts文件热重载失效问题求助

针对你遇到的「修改独立.ts组件脚本时，控制台显示热重载日志但页面不更新」的问题，给你几个可行的解决方向：

1. 给TS脚本添加HMR手动接受逻辑 #

在你的MyComponent.ts末尾添加HMR处理代码，明确告诉Vite触发组件更新：

import { defineComponent } from 'vue';

const MyComponent = defineComponent({
  name: 'MyComponent',
  data() {
    return {
      text: []
    };
  }
});

export default MyComponent;

// 手动处理HMR更新
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    if (newModule.default) {
      import.meta.hot.invalidate(); // 触发组件重新渲染
    }
  });
}

2. 调整unplugin-vue-components插件配置 #

你用到的Components插件可能干扰了HMR的模块追踪，开启插件的热重载支持：

// vite.config.ts
export default defineConfig({
  // ...其他配置
  plugins: [
    vue(),
    Components({
      resolvers: [AntDesignVueResolver()],
      hotReload: true // 开启组件热重载
    })
  ],
  // ...其他配置
});

3. 明确指定Vite监听的文件范围 #

确保Vite的文件监听包含你的TS文件，在vite.config.ts的server配置里补充：

server: {
  port: 5173,
  watch: {
    include: ['src/**/*.ts', 'src/**/*.vue', 'src/**/*.scss']
  }
}

4. 临时排查：禁用自动导入插件测试 #

如果以上方法都没效果，先注释掉Components插件，测试热重载是否正常。如果恢复正常，说明是插件的缓存或配置冲突，可尝试删除node_modules/.vite缓存目录后重新启动项目。

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