npm run serve 启动失败主因是项目非 Vue CLI 创建或 package.json 缺少 serve 脚本；需先确认项目类型（Vue CLI/Vite/Webpack），再执行对应命令（如 npm run dev），并检查终端路径、端口占用、防火墙及 source map 配置。
npm run serve 启动失败，报 command not found 或 missing script: serve
Vue CLI 创建的项目默认靠 npm run serve 启动开发服务器，但不是所有 Vue 项目都用 CLI 脚手架。如果你看到这个错误，大概率是项目没走 vue create 流程，或者 package.json 里压根没定义 serve 脚本。
- 先确认项目是否基于 Vue CLI：检查
package.json中是否有vue字段（如"vue": {"version": "3.4.21"}）或依赖里含@vue/cli-service - 如果没有，可能是 Vite 项目——该用
npm run dev，而不是serve - 如果是手动搭的 Webpack 项目，得看
scripts里实际写了什么，比如"start": "webpack serve"，那就运行npm start - VS Code 终端没激活项目根目录？cd 进错文件夹也会报这个错——确认终端当前路径是
package.json所在目录
VS Code 终端里执行 npm run serve 卡住、没输出、浏览器打不开
常见于端口被占、防火墙拦截，或 CLI 自动打开浏览器失败。它其实可能已经跑起来了，只是你没注意到控制台最后一行的提示。
- 留意终端最后几行有没有类似
Local: http://localhost:8080/的地址——直接复制进浏览器就行，别等自动弹窗 - 如果提示
Port 8080 is in use，改端口：在vue.config.js加devServer: { port: 8081 }；Vite 项目则改vite.config.js中的server.port - Windows 上杀毒软件有时会拦截 Node.js 网络行为，临时禁用试试；Mac 用户注意系统自带防火墙是否阻止了
node - VS Code 内置终端偶尔缓存旧环境变量，关掉终端重开一个，再
npm run serve
代码改了但浏览器没更新，热重载（HMR）不生效
HMR 失效不一定是配置问题，更多是 VS Code 文件保存机制和框架监听逻辑之间的配合偏差。
- 确认 VS Code 设置里
files.autoSave是onFocusChange或onDelay，别设成off——没保存，Webpack/Vite 根本收不到变更 - Vue 3 + Vite 项目中，
.vue文件里的<script setup></script>语法修改后 HMR 通常正常；但改了defineProps类型或顶层import变更，可能触发整页刷新而非局部更新——这是预期行为，不是 bug - 如果改了组件名、移除了
export default，或破坏了模块导出结构，HMR 会退化为页面刷新，属于框架限制 - 终端里出现
[vite] hot updated: /src/App.vue表示 HMR 成功；若只看到page reload，说明框架判定必须刷新
想用 VS Code 调试 Vue 源码，断点不命中
Vue 3 的组合式 API（setup()、ref、computed）在编译后会被转换，原始源码和运行时代码不一一对应，断点容易“悬空”。
立即学习“前端免费学习笔记（深入）”；
- 确保项目已启用 source map：Vue CLI 默认开启；Vite 项目确认
vite.config.js里build.sourcemap是true（开发模式默认就是） - VS Code 的
launch.json必须指向http://localhost:8080（或你的 dev server 地址），且启用urlFilter和webRoot，否则调试器找不到源码映射 - 在
<script setup></script>里打的断点，有时要等组件首次渲染后才生效；纯ref()声明处断点基本无效——它只是个函数调用，真正逻辑在 getter/setter 里 - 优先在业务逻辑函数内部打断点（比如
onClick回调、onMounted里），比在响应式声明处靠谱得多
App.vue，其实 Chrome DevTools 里加载的是 App.vue?type=script&lang.ts 这种虚拟 URL，断点位置得对准那个。 
