为 vite react 项目启用热重载而不是页面重载

Question

我是 vite 的新手，我刚刚启动了一个新的 React 应用程序。我的项目启用了 hmr（热模块替换）并且没问题。我刚刚添加了一些更改但是当我现在启动它时 hmr 被禁用并且当添加新更改时浏览器正在重新加载（不是快速更新）并且在终端中它记录： 12:37:54 PM [vite] page reload src/App.tsx 我创建了一个新的测试应用程序和它启用了 hmr，当我添加任何更改时，它会记录： 12:35:23 PM [vite] hmr update /src/App.tsx (x2) 你能告诉我如何启用 hmr 而不是页面重新加载吗？

这是我的 vite.config.ts 用于记录项目 page reload

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

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

还有 tsconfig.json 用于记录 page reload 的项目

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["./src"]
}

原文由 Mahdi-Jafaree 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

跟随搜索后；我找到了这个 链接。问题是，如果任何导出被命名为 export const foo = 12 这样会破坏 hmr。所以在更改为 export default function FooBar(){} hmr 后工作。

原文由 Mahdi-Jafaree 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我的解决方案是确保组件文件名的大小写与导入匹配，因此：

 import Login from "../components/Login.vue";

当文件名为 LogIn.vue 时，导致登录组件不重新加载更改（没有错误）。将导入更改为：

 import Login from "../components/LogIn.vue"

解决了问题！

原文由 disperse 发布，翻译遵循 CC BY-SA 4.0 许可协议