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

0tdrvxhp 于 2023-02-28 发布在 Java

关注(0)|答案(9)|浏览(224)

我是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"]
}

JavaScript

来源：https://stackoverflow.com/questions/70996320/enable-hot-reload-for-vite-react-project-instead-of-page-reload

9条答案

按热度按时间

8yoxcaq71#

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

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

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

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

已修复问题！

赞(0）回复(0）举报 2023-02-28

0s7z1bwu2#

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

赞(0）回复(0）举报 2023-02-28

bfnvny8b3#

在我的例子中，我使用的是typescript，解决方案是设置vite.config.js react插件，如Github评论中所示：https://github.com/vitejs/vite/discussions/4577#discussioncomment-2320990
基本上是这样的

export default defineConfig({
  plugins: [
    react({
      include: "**/*.tsx",
    }),
  ],
});

赞(0）回复(0）举报 2023-02-28

0sgqnhkj4#

我也遇到了这个问题，解决这个问题的方法是删除页面目录内每个文件的子目录。

我以前的文件夹结构：

├── src
│   ├── Components
│   ├── Pages
│   │   ├── Home
│   │   │   ├── Home.styled.jsx
│   │   │   ├── Index.jsx
│   │   ├── About
│   │   │   ├── About.styled.jsx
│   │   │   ├── Index.jsx

修复

当我将我的文件夹结构更改为这样，并直接更新我的App.jsx文件时，它工作正常：
所以从这里到这里

├── src
│   ├── Components
│   ├── pages
│   │   ├── Home.jsx
│   │   ├── About.jsx

赞(0）回复(0）举报 2023-02-28

niknxzdl5#

我最近遇到了这个问题，这里有一个解决方案，如果你使用的是.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",
  })]
})

希望这能解决你的问题。

赞(0）回复(0）举报 2023-02-28

doinxwow6#

我也遇到了这个问题，在更仔细地阅读文档后，我意识到我只需要将此添加到vite知道的任何js/ts文件（在index.html文件中引用），它就开始工作了：

import.meta.hot

赞(0）回复(0）举报 2023-02-28

ljo96ir57#

我也面临这个问题，我只是运行npm install后，该问题修复

赞(0）回复(0）举报 2023-02-28

hgtggwj08#

确保组件的导入名称与此组件所在文件的名称相同：
import NewReleases from '../components/homepageComps/NewReleases'此为正确
但这不是import NewReleases from '../components/homepageComps/newReleases'

赞(0）回复(0）举报 2023-02-28

balp4ylt9#

检查您的tsx文件名的第一个字母是否正确!
component.tsx-〉Component.tsx

赞(0）回复(0）举报 2023-02-28