Vite hot update failure solution

When we write the code normally, the page displayed by the browser when saving, should be carried out at the same time with vite, but at this time, the project needs to be restarted, which is wrong

one

This may be due to a problem with the vite hot update mechanism, because during the hot update process, the cache may not be cleared, resulting in browser pages that cannot be updated at the same time.

1. Clear the cache in your browser and reload the page.
2. Set a specific cache policy in the vite configuration file, the configuration is as follows:

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

In the above configuration, we set the port to 443, which can avoid the situation that the cache is not cleared.

two

But although I don’t need to restart the project like this, the browser still needs to be refreshed to see

It may be that the browser cache cannot update in time. Add the following code to the vite configuration file to disable browser caching:

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

After adding the above code, a new chunk file will be generated when packaging. The file name is everything.js, which disables the browser cache.