为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()]
})也适用于记录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"]
}回答 7
Stack Overflow用户
发布于 2022-02-05 09:06:24
在跟踪搜索之后，我找到了这个链接。问题是，如果任何出口都被命名为像export const foo = 12这样的出口，这将打破hmr。因此，在转换为export default function FooBar(){}后，hmr正在工作。
Stack Overflow用户
发布于 2022-06-10 15:36:53
我的解决方案是确保组件文件名的大小写与导入匹配，如下所示：
import Login from "../components/Login.vue";当文件名为LogIn.vue时，登录组件不会重新加载更改(没有错误)。将导入更改为：
import Login from "../components/LogIn.vue"解决问题了！
Stack Overflow用户
发布于 2022-07-13 07:15:40
在我的例子中，我使用的是类型记录，解决方案是设置vite.config.js react插件，就像这个Github注释中指出的那样：https://github.com/vitejs/vite/discussions/4577#discussioncomment-2320990
基本上是这样：
export default defineConfig({
plugins: [
react({
include: "**/*.tsx",
}),
],
});https://stackoverflow.com/questions/70996320
复制相似问题
腾讯云开发者
