Vite.js - 如何启用 Ctrl+S 上的整页重新加载？

Question

如果我使用“npm run dev”运行 vite 开发服务器，并且我编辑了 utils.js，如何让 vite 从 index.html 进行完全重新加载，以便重新加载所有脚本？

我遇到的问题是：如果我编辑除index.html之外的任何文件（并保存，ctrl+s），vite服务器将重新加载一次，但我的index.js将调用两次？这是 vite.js 的错误吗？

Answer 1

您必须handleHotUpdate在vite.config.ts或vite.config.js(TypeScript/JavaScript)中配置自定义挂钩

处理HotUpdate文档

下面的代码改编自 GitHub 上此问题的答案：Option to Force full reload on change, disabling HMR。

vite.config.ts：

import { defineConfig, PluginOption } from 'vite'
import react from '@vitejs/plugin-react'

const fullReloadAlways: PluginOption = {
  name: 'full-reload-always',
  handleHotUpdate({ server }) {
    server.ws.send({ type: "full-reload" })
    return []
  },
} as PluginOption

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), fullReloadAlways],
})

vite.config.js：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), fullReloadAlways],
})