元素
元素
工具
博客
问答

npm run dev 启动后 Vue 组件不热更新是怎么回事？

博主梓睿 阅读 26
前端

我最近在用 Vue 3 + Vite 搭的项目，本地开发时执行 npm run dev 能正常启动服务，但改了组件代码后页面不会自动刷新，得手动刷新才行。我已经确认开启了 HMR，也试过删 node_modules 重装依赖，还是不行。

比如下面这个简单的组件，我改了按钮文字，保存后控制台没报错，但浏览器没反应：

<template>
  <button @click="count++">点了 {{ count }} 次</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

是不是 npm scripts 里少配了什么参数？或者 vite.config.js 哪里要特别设置？

我来解答 赞 7 收藏
二维码
手机扫码查看
反馈
2 条解答
设计师昊沅
设计师昊沅 Lv1
Vite 的 HMR 是默认开启的，理论上不需要额外配置。你先检查一下浏览器控制台有没有报错，有时候代码报错会导致 HMR 断开连接。

如果控制台没问题，试试在 vite.config.js 里显式配置一下 HMR：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'



export default defineConfig({

  plugins: [vue()],

  server: {

    hmr: {

      overlay: true

    }

  }

})


这个配置会把 HMR 错误以覆盖层的方式显示在浏览器页面上，能帮你看到是不是有隐藏的错误。

另外有个坑要注意：如果你的组件是在 defineComponent 或者普通
相关推荐
元素
元素
工具
博客
问答
登录/注册