Vite热更新时引入的JS文件修改不生效需重启dev服务器

不需要额外配置全局监听文件夹，Vite默认已经监听整个src目录的变更。出现这个问题的核心原因有两个：

1. Quasar默认的Vite预构建缓存会把src下非pages、components、layouts等约定目录的独立js文件做持久化缓存，修改文件后缓存没失效，哪怕手动刷新也会读旧的缓存产物
2. 独立js文件作为Vue组件的静态依赖时，默认HMR更新边界只到引用它的.vue组件层，没有递归把依赖的js文件标记为可热更新模块，就会出现控制台提示组件已热更，但实际js逻辑还是旧版本的现象。

• 先显式补全路径别名配置，避免路径解析异常导致的缓存匹配错误
  打开根目录quasar.config.js，顶部先引入node内置path模块：

  const path = require('node:path')
  

  找到build配置块，补全alias规则，不要完全依赖默认别名：

  build: {
    alias: {
      src: path.resolve(__dirname, 'src')
    },
    // 其他原有build配置保留
  }
  

• 给独立工具js文件添加HMR接受声明
  在src/js/task.js文件的最末尾添加如下代码，让Vite识别这个文件的变更需要触发热更新：

  if (import.meta.hot) {
    import.meta.hot.accept()
  }
  

  如果这个目录下的js都是全局复用的工具/类文件，可以给每个文件都加这段，或者封装个统一的工具片段复用。
• 调整Vite配置排除自定义js目录的预构建缓存
  还是在quasar.config.js的build块中，添加extendViteConf配置，把自定义js目录排除出预构建缓存列表，同时显式声明HMR监听规则：

  build: {
    // 前面补的alias配置保留
    extendViteConf(viteConf) {
      // 排除自定义js目录的预构建缓存
      if (!Array.isArray(viteConf.optimizeDeps.exclude)) {
        viteConf.optimizeDeps.exclude = []
      }
      viteConf.optimizeDeps.exclude.push(/src\/js\//)
  
      // 显式配置监听规则，避免其他插件覆盖默认监听路径
      if (!viteConf.server.watch) {
        viteConf.server.watch = {}
      }
      viteConf.server.watch.ignored = ['!**/src/**']
    }
  }
  

• 清理旧缓存后重启开发服务
  删掉项目根目录下node_modules/.vite文件夹，这是Vite的预构建缓存目录，执行quasar dev重新启动服务即可。后续再修改src/js下的文件，热重载会正常生效，手动刷新也能拿到最新的构建内容，不需要反复重启服务。

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