npm run serve 是启动 Vue 项目最直接有效的方式，前提是项目已初始化且 node_modules 依赖完整；终端须在项目根目录，脚本名需与 package.json 中 scripts 字段严格一致。
npm run serve 是最直接有效的启动方式，前提是项目已正确初始化且依赖安装完整。VSCode 本身不“运行”Vue项目，它只提供终端和编辑环境；真正启动服务的是项目配置的构建工具（Vue CLI 或 Vite）。
确认 package.json 里有可用的启动脚本
Vue 项目启动命令完全取决于 package.json 中 scripts 字段的定义，VSCode 不会自动猜或补全。
- Vue CLI 项目常见脚本：
"serve": "vue-cli-service serve"→ 执行npm run serve - Vite 项目常见脚本：
"dev": "vite"或"preview": "vite preview"→ 执行npm run dev - 如果
npm run serve报错Missing script: "serve"，说明脚本名不匹配，先查package.json再执行对应命令（如npm run dev） - 脚本名拼写错误、大小写不一致（如
npm run Serve）、或没加run（npm serve❌）都会失败
终端必须在项目根目录，且 node_modules 已就位
VSCode 内置终端默认打开位置可能不是你的项目根目录，这是新手最常卡住的地方。
- 打开终端后，先用
pwd（macOS/Linux）或cd（Windows）确认当前路径是否包含package.json和node_modules - 若
node_modules不存在或为空，npm run serve必然失败，必须先运行npm install（或yarn install/pnpm install） - 某些项目用
npx vue-cli-service serve可绕过本地node_modules缺失问题，但仅作临时排查，不替代npm install - Windows 用户注意 PowerShell 默认禁用本地脚本执行，可临时切到
cmd终端，或运行Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
端口冲突或浏览器打不开？别只盯着 VSCode 界面
终端显示 Compiled successfully 仅表示构建完成，不代表服务可访问。真实状态要看终端日志末尾的监听地址，以及浏览器能否加载 index.html。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
- Vue CLI 默认端口是
8080，Vite 是5173，但都可能被改过：检查vue.config.js中的devServer.port，或vite.config.ts中的server.port - 终端报错
Port 5173 is already in use：用lsof -i :5173（macOS/Linux）或netstat -ano | findstr :5173（Windows）找 PID 并kill掉 - 临时换端口：加参数
npm run dev -- --port 3001（双横线--是关键，不能少） - 页面空白但控制台无报错？打开浏览器开发者工具 → Network 标签页，看
index.html是否返回 200，后续.js文件是否 404 —— 很可能是base配置错误（如 Vite 的base: './'在本地开发时导致路径解析异常）
调试不是“按 F5 就行”，得配对 launch.json 和实际服务
VSCode 调试前端项目本质是“启动浏览器并连接已运行的服务”，不是从零启动整个流程。断点不生效，90% 出在配置错位。
- 必须先手动运行
npm run serve（或npm run dev），等服务起来后再点 ▶️ 启动调试 -
launch.json中的url必须和终端打印的实际地址严格一致（比如http://localhost:8080，不是http://127.0.0.1:8080，某些浏览器会拒绝同源判断） - 使用 Chrome 调试需装官方扩展
Debugger for Chrome，Edge 则装Debugger for Edge；type字段要对应（pwa-chrome/pwa-msedge） - 断点灰色不可命中？检查
sourceMapPathOverrides是否匹配你项目实际 sourcemap 路径（Vite 默认是"vite:///src/*": "${webRoot}/src/*"，不是 webpack 的写法）
真正的难点不在“怎么点”，而在于理解每条命令背后的责任归属：VSCode 管编辑和终端，package.json 管入口，构建工具管服务生命周期，浏览器管运行时。任何一环脱节，都会表现为“点不动”“打不开”“断不了”。
