我是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的项目的tsconfig.json
{
"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"]
}
对我来说，解决方案是确保组件文件名的大小写与导入匹配，因此：
import Login from "../components/Login.vue";
当文件名为LogIn.vue时，导致登录组件未在更改时重新加载(没有错误(。将导入更改为：
import Login from "../components/LogIn.vue"
解决了问题！
搜索后；我找到了这个链接。问题是，如果任何导出都是像export const foo = 12这样的命名导出，这将破坏hmr。所以在变为CCD_ 9之后hmr工作。
在我的案例中，我使用的是typescript，解决方案是设置vite.config.jsreact插件，如Github注释所示：https://github.com/vitejs/vite/discussions/4577#discussioncomment-2320990
基本上是这样的：
export default defineConfig({
plugins: [
react({
include: "**/*.tsx",
}),
],
});
我最近遇到过这个问题，这里有一个解决方案。如果你使用的是.jsx文件，你应该修改vite.config.js:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react({
// Add this line
include: "**/*.jsx",
})]
})
或者，如果您使用的是typescript(.tsx(，您可以修改vite.config.js:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react({
// Add this line
include: "**/*.tsx",
})]
})
希望这能解决你的问题。
我也遇到了这个问题，在仔细阅读文档后，我意识到我只需要将它添加到vite知道的js/ts文件中的任何中(在index.html文件中引用(，它就开始工作了：
import.meta.hot
要启用热重新加载，您需要将此配置放入您的vite.config.ts 中
export default defineConfig({
plugins: [react()],
server: {
watch: {
usePolling: true
}
}
})
检查tsx文件名的第一个字母是否大写！
component.tsx->Component.tsx
我也面临这个问题，我只是在解决问题后运行npm install
确保组件的导入名称与该组件所在文件的名称相同：
这项工作：
import NewReleases from '../components/homepageComps/NewReleases'
这不是：
import NewReleases from '../components/homepageComps/OtherNameHere'
为我修复的是删除pages目录中每个文件的子目录。参考
我以前的文件夹结构：
├── src
│ ├── Components
│ ├── Pages
│ │ ├── Home
│ │ │ ├── Home.styled.jsx
│ │ │ ├── Index.jsx
│ │ ├── About
│ │ │ ├── About.styled.jsx
│ │ │ ├── Index.jsx
修复
当我把我的文件夹结构改成这样，并直接将我的App.jsx更新到文件中时，它就起了作用：
所以从这个(./pages/Home/)到(./pages/Home.jsx)
├── src
│ ├── Components
│ ├── pages
│ │ ├── Home.jsx
│ │ ├── About.jsx
我正在进行我的第一个vite-react项目，来自cra，我习惯于使用functional"箭头"；组件。
const funcName = () => {...}
当我看到App.jsx有正常的函数时，我就把它改成了箭头函数。
从该function App() {...}到该const App = () => {...}
从项目一开始，我的任何更新都没有在浏览器中更新。我想取消并重新启动服务器以查看更新。
在把它改回正常功能后，我的hmr开始正常工作。
因此，截至2023年4月，应用程序组件必须以以下方式编写：
function App() {...}