如何关闭ViteJS的模块热加载功能？

Question

我有一个服务器端渲染的

production

模式 Vite 应用程序。我的问题是：网页通常会重新加载，控制台会显示

[vite] connecting...

。我将此追溯到 vite 代码库的热模块重新加载部分。但是，我不希望

hmr

为

production

，但无论我将以下两个设置设置为

false

，它似乎仍然打开：

在我的

vite.config.js

文件中，我有：

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

还在我的 NodeJS

server.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;

或者，如果您希望完全重新加载而不是热模块重新加载，您可以将以下插件添加到您的

vite.config.ts

。

{
    name: 'full-reload',
    handleHotUpdate({ server }) {
        server.ws.send({ type: "full-reload" })
        return [];
    }
}