直接在 vs code 终端执行 npm run dev 即可启动 vue3 + vite 项目，前提是项目已初始化、依赖安装完成且具备 package.json（含 dev 脚本）、vite.config.ts/js 和 src/main.ts 三个必要文件；启动后访问终端提示的本地地址（默认 http://localhost:5173），调试需配置 launch.json 的 webroot 并使用官方 js debugger。
直接在 VS Code 终端执行 npm run dev 就能启动 Vue3 + Vite 项目，前提是项目已正确初始化且依赖装全。VS Code 本身不“运行”项目，它只提供终端和编辑环境。
确认项目结构和必要文件
打开项目根目录，必须存在以下三项，缺一不可：
-
package.json—— 检查scripts字段是否有"dev": "vite"或"serve": "vite" -
vite.config.ts或vite.config.js—— Vite 的配置入口，决定端口、别名、插件等 -
src/main.ts（或main.js）—— Vue 应用的启动入口
如果刚克隆仓库但没装依赖，npm run dev 会报错 command not found: vite，此时先运行 npm install（或 yarn install / pnpm install）。
在 VS Code 终端中正确启动
别用菜单栏“运行 → 启动调试”，那是 Node.js 调试器，不是开发服务器。打开 VS Code 内置终端（Ctrl + `），确保当前路径是项目根目录（不是 server/ 或 src/ 子目录），然后执行：
npm run dev
常见变体：
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- Vue CLI 项目用
npm run serve（但 Vue3 官方推荐 Vite，serve已非主流） - Yarn 用户：用
yarn dev - pnpm 用户：用
pnpm dev
启动成功后终端会输出类似：Local: http://localhost:5173/。这个地址就是你该访问的开发页。
端口冲突或打不开页面？查配置，别猜
Vite 默认端口是 5173，但可能被改过。别凭经验输 http://localhost:3000 或 :8080，直接看配置：
- 打开
vite.config.ts，找server.port字段（例如port: 3100） - 如果没配，就按默认
5173访问 - 如果提示
ERROR: Port 5173 is already in use，要么杀掉占用进程（lsof -i :5173或任务管理器），要么改配置里的port
注意：Vite 不读 vue.config.js，那是 Vue CLI 的配置文件，放错地方或误删不会影响 Vite 启动，但会让你误判问题来源。
调试断点不生效？关键三步不能跳
想在 VS Code 里打断点调试，光启动项目不够，必须满足：
- VS Code 已安装官方
Javascript Debugger（不是旧版 Debugger for Chrome） - 项目启动后，再点 VS Code 左侧“运行与调试”面板，选
Web 应用 (Chrome)或对应浏览器配置，并把url改成实际端口（如"url": "http://localhost:5173"） - 确保浏览器没同时开着 F12 开发者工具 —— 如果 Chrome 已用
F12打开控制台，VS Code 断点会被绕过，直接走浏览器控制台
最常被忽略的是：launch.json 中的 webRoot 必须指向源码目录（通常是 "${workspaceFolder}/src"），否则 VS Code 找不到映射关系，断点显示为“未绑定”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
