如何配置Vite使其在组件HTML文件变更时触发浏览器全页重载？

兄弟我太懂你这种反向需求的尴尬了——大伙都在追着HMR的速度跑，你却要反过来搞全页刷新😂。针对你用Vite托管老AngularJS项目的场景，完全可以通过配置实现组件HTML变更时触发全页重载，给你两种实用的方案：

方案一：自定义Vite插件监听组件HTML变更 #

在你的vite.config.js里添加这段自定义插件配置，精准接管组件HTML的变更处理：

export default {
  server: {
    // 确保Vite监听所有需要的HTML文件（默认已监听，但明确配置更稳妥）
    watch: {
      include: ['app/**/*.html', 'index.html']
    }
  },
  plugins: [
    {
      name: 'full-reload-components',
      configureServer(server) {
        // 把组件HTML目录加入监听列表
        server.watcher.add('app/components/**/*.html');
        
        // 监听文件变更事件
        server.watcher.on('change', (filePath) => {
          // 只处理组件HTML文件，跳过index.html（它默认已经会触发全页刷新）
          if (filePath.includes('app/components/') && filePath.endsWith('.html')) {
            // 发送全页重载指令，和index.html变更时的原生逻辑一致
            server.ws.send({ type: 'full-reload' });
          }
        });
      }
    }
  ]
};

原理很直白：这个插件会专门盯紧你指定的组件HTML文件，一旦检测到变更，就通过Vite的WebSocket通道给浏览器发全页重载信号，和修改index.html时的原生逻辑完全同步。

方案二：简化版配置（所有非index的HTML都触发全页刷新） #

如果你想让除index.html外的所有HTML文件变更都触发全页刷新，可以把逻辑简化，不用纠结路径判断：

export default {
  plugins: [
    {
      name: 'full-reload-all-html',
      configureServer(server) {
        server.watcher.add('**/*.html');
        server.watcher.on('change', (file) => {
          if (!file.endsWith('index.html')) {
            server.ws.send({ type: 'full-reload' });
          }
        });
      }
    }
  ]
};

小提示 #

• 确保你的Vite版本是2.x及以上，这些配置都能正常生效
• 如果之前有配置过HMR相关规则，记得检查会不会和自定义逻辑冲突
• 测试时改完组件HTML，看控制台是否输出类似[vite] page reload xxx.html的日志，同时浏览器应该会自动全页刷新

备注：内容来源于stack exchange，提问作者sonicblis