Vue CLI 创建的项目在 PhpStorm 中默认支持热加载，无需额外配置 Webpack；真正起作用的是 Vue CLI 内置的 webpack-dev-server 和 HMR 插件，PhpStorm 仅作为编辑器，不接管 HMR。
Vue CLI 创建的项目在 PhpStorm 中默认就能热加载，不需要额外配置 Webpack 或手动加 module.hot；但 PhpStorm 自身不接管 HMR，它只是编辑器，真正起作用的是 Vue CLI 的 webpack-dev-server 和内置 HMR 插件。
PhpStorm 里改了 .vue 文件，浏览器没更新？先看这三件事
热加载失效在 PhpStorm 中很常见，但绝大多数不是 PhpStorm 的锅，而是开发服务器或文件监听层面的问题：
- 确认你运行的是
npm run serve（或yarn serve），不是npm run build+ 静态服务器 —— 后者根本没 HMR - 检查终端输出：启动时应有
Compiled successfully和HMR enabled类似提示；若看到Hot Module Replacement disabled，说明 devServer 配置被意外覆盖 - PhpStorm 默认启用 “Safe Write”（安全写入）：它会先把文件写到临时位置再替换原文件，导致 webpack 监听失效；必须关闭：
Settings > Appearance & Behavior > System Settings > Use "safe write"→ 取消勾选
Vue.Draggable 或嵌套组件热重载后状态丢失？别急着改代码
这类问题通常和 Vue 的响应式边界或组件实例生命周期有关，和 PhpStorm 无关，但容易误判：
- Vue.Draggable 内部依赖
Sortable.js的原生 DOM 操作，热重载时 Vue 会卸载并重建组件，但 Sortable 实例可能残留或未正确销毁 → 在beforeUnmount（Vue 3）或beforeDestroy（Vue 2）中显式调用sortable.destroy() - 使用
<keep-alive>包裹动态拖拽容器，能保留组件实例和内部 Sortable 状态，但注意：它不解决 props 更新触发的重新渲染，只防销毁重建 - 如果列表数据来自 Vuex/Pinia，确保 mutation 是响应式的；直接赋值
state.list = newList在某些旧版配置下可能绕过响应式追踪，改用state.list.splice(0, state.list.length, ...newList)
样式修改不生效？重点查 <style scoped> 和 CSS 预处理器监听
PhpStorm 编辑 .vue 单文件组件时，<style> 块的热更新比 <script> 更脆弱：
立即学习“PHP免费学习笔记（深入）”；
-
scoped样式由vue-loader注入 data-v-id 属性，热重载时新旧 style 标签共存可能导致样式冲突；可临时去掉scoped快速验证是否为作用域问题 - 用 SCSS/Less 时，确保
vue.config.js中css.loaderOptions配置正确，且没有禁用watchFiles；例如 Sass 没配additionalData导入变量文件，修改变量后热重载可能不触发重编译 - PhpStorm 的 “File Watchers” 插件（如 Sass watcher）与 Vue CLI 的 HMR 冲突 —— 务必禁用所有第三方 CSS 编译 watcher，只让
vue-cli-service全权处理
真正卡住的点往往不在编辑器，而在 webpack 监听粒度、CSS 作用域机制、或第三方库对 Vue 生命周期的假设。热重载不是魔法，它只替换模块定义，不保证外部状态自动同步 —— 尤其当组件内持有非响应式 DOM 引用或第三方实例时。
