直接运行 npm run serve 即可启动 vue cli 项目开发服务器（默认 http://localhost:8080），vue 3 + vite 项目则用 npm run dev（默认 http://localhost:5173）；切勿双击 index.html，须通过 http 服务访问。
直接在终端运行 npm run serve 就能打开网页
Vue CLI 创建的项目默认带开发服务器，不用手动找 HTML 文件或双击打开。执行命令后，它会启动本地 HTTP 服务（通常是 http://localhost:8080），自动在默认浏览器中打开页面。
常见错误现象：command not found: npm 或 Missing script: "serve" —— 前者说明没装 Node.js 或没加到环境变量，后者多见于 Vue 3 + Vite 项目（Vite 用的是 npm run dev，不是 serve）。
- 确认你在项目根目录下（即有
package.json的那个文件夹），再运行命令 - Vue 2 CLI 项目：用
npm run serve或yarn serve - Vue 3 + Vite 项目：用
npm run dev，端口默认是5173，地址变成http://localhost:5173 - 如果浏览器没自动弹出，手动复制控制台里打印出的地址（注意别漏掉
http://）
VS Code 里点「运行」按钮没反应？检查终端是否在正确位置
VS Code 底部集成终端（Terminal）默认不会自动切换到你的项目目录。哪怕你用 VS Code 打开了整个项目文件夹，终端仍可能停留在用户主目录或上一个路径。
使用场景：你点了顶部菜单「Terminal → New Terminal」，结果一敲 npm run serve 就报错 package.json not found。
立即学习“前端免费学习笔记（深入）”；
- 先看终端提示符前的路径，比如
~/Documents$，明显不对 - 用
cd切过去：例如项目放在~/code/my-vue-app，就输cd my-vue-app - 或者更省事：在资源管理器里右键项目文件夹 → 「Open in Integrated Terminal」
- 别依赖 VS Code 的「Run and Debug」面板来启 Vue 项目——它不认
package.json里的 script，只认.vscode/launch.json配置（一般不需要配）
打开网页后一片空白或报错 Failed to fetch？可能是热更新端口没通
Vue 开发服务器其实起了两个服务：一个是主页面（localhost:8080），另一个是 websocket 热更新通道（比如 localhost:8080/ws）。如果公司网络、防火墙或代理拦截了 WebSocket，页面加载完就卡住，控制台报类似错误。
性能 / 兼容性影响：这类问题在内网办公环境特别常见，和代码本身无关，但会让你以为自己写崩了。
- 打开浏览器开发者工具（F12），切到 console 标签页，看有没有红色报错，尤其是含
ws://或net::ERR_CONNECTION_REFUSED - 临时关掉代理软件（如 Clash、SwitchyOmega）再刷新
- 尝试加参数启动：比如
npm run serve -- --host 0.0.0.0 --port 8081，避开被占的端口或触发不同网络栈 - 如果只是想快速看效果，不依赖热更新，可以改用静态方式：
npx serve -s dist（需先npm run build）
为什么双击 index.html 打不开？Vue 路由和资源路径会失效
Vue 项目不是传统静态页。直接双击打开 index.html，浏览器走的是 file:// 协议，这时所有相对路径（比如 ./js/app.js）会按文件系统解析，而 webpack/Vite 打包后的资源实际在内存或虚拟路径里，根本找不到。
典型表现：白屏 + 控制台一堆 404，router-view 不渲染，import 的组件全变 undefined。
- 这是设计使然，不是 bug —— Vue 的模块系统、路由懒加载、CSS-in-JS 都依赖 HTTP 服务支持
- 连
vue-router的history模式都跑不了，因为file://下没有服务端做 fallback - 真要离线预览，必须用
serve、http-server或npx live-server这类轻量 HTTP 服务，不能靠文件系统
Vue 项目本质是「需要服务端参与的前端应用」，不是「能直接双击的网页」。最常被忽略的点，就是把「写完代码」和「能跑起来」当成一回事——其实中间差了一个正在运行的开发服务器。