vite热更新失效解决方法

当我们正常写代码的时候，保存时浏览器显示的页面，用vite应该是同时进行的，但此时需要重启项目，这样就不对了

一

可能出现这种情况是因为vite热更新机制的问题，因为在热更新过程中，有可能会出现缓存未清除的情况，导致浏览器页面不能同时更新。

1. 在浏览器中清除缓存，重新加载页面。
2. 在vite配置文件中设置特定的缓存策略，配置如下：

export default {
    
    
  //...
  server: {
    
    
    hmr: {
    
    
      overlay: true,
      // 解决热更新不同步的问题
      port: 443
    }
  }
}

以上配置中，我们将端口设置为了443，这样可以避免缓存未清除的情况。

二

但是我这样虽然不用重启项目了，但是浏览器还是要刷新才能看到

可能是因为浏览器缓存原因无法及时更新。在vite配置文件中添加以下代码来禁用浏览器缓存：

export default {
    
    
  //...
  build: {
    
    
    rollupOptions: {
    
    
      output: {
    
    
        // 禁用浏览器缓存，确保每次都获取最新的代码
        manualChunks: () => 'everything.js',
      },
    },
  },
}

添加以上代码后，打包时会生成一个新的chunk文件，文件名为everything.js，这样就禁用了浏览器缓存。