如何关闭 ViteJS 的热模块重新加载？

Question

我有一个服务器端渲染的production模式Vite应用程序。我的问题是:通常网页将重新加载，控制台将显示[vite] connecting...。我将其追溯到vite代码库的热模块重载部分。然而，我不希望hmr为production打开，但无论我将下面的两个设置设置为false，它似乎仍然打开:

在我的vite.config.js文件中，我有:

...
export default defineConfig({
server: {
hmr: false,
},

也在我的NodeJSserver.js文件我有:

const vite = await createViteServer({
server: { middlewareMode: 'ssr', hmr: false },
})

如何关闭Vite的hmr?

Answer 1

添加到您的app.js文件:

if (import.meta.hot)
import.meta.hot.accept(() => import.meta.hot.invalidate())

并在vite.config.js文件中添加false到'defineConfig':

server.hmr.overlay property
defineConfig({          
server: {
/*here*/
hmr: { overlay: false }
}, ...
})

Answer 2

Vite有一个HMR API，允许您在重新加载期间使模块无效。您可能也对HMR服务器配置感兴趣，它可以在您的vite.config.ts文件中配置。

// index.ts
if (import.meta.hot) {
import.meta.hot.accept(() => {
import.meta.hot.invalidate();
})
}

Vite还有一个--no-hmr标志用于禁用热模块重载。

vite --no-hmr

不幸的是，这两种解决方案都不适合我。这就是为什么我在主/索引文件中添加了以下代码，以便在HMR发生后强制浏览器重新加载。

// index.ts
if (window['reload']) window.location = window.location;
window['reload'] = true;