VSCode本身不运行Vue项目,仅提供终端和编辑环境;真正启动服务的是npm run dev或npm run serve等命令,需严格匹配package.json中scripts字段定义、项目根目录路径及完整node_modules依赖。

VSCode 本身不运行 Vue 项目,它只提供终端和编辑环境;真正启动服务的是 npm run dev 或 npm run serve 这类命令——前提是命令名、路径、依赖三者全部对得上。
怎么确认该用 npm run dev 还是 npm run serve
脚本名不是固定的,全看 package.json 里 scripts 字段怎么写。Vite 项目默认是 "dev": "vite",Vue CLI 项目默认是 "serve": "vue-cli-service serve"。别猜,直接打开 package.json 查。
- 如果看到
"dev": "vite",就执行npm run dev - 如果看到
"serve": "vue-cli-service serve",就执行npm run serve - 如果看到
"start": "vite",那就得用npm start,不是npm run start(npm start是npm run start的简写,但很多人会多打一个run) - 大小写敏感:
npm run Dev或npm run SERVE都会报错Missing script
终端卡住不动或报 command not found 怎么办
这不是 VSCode 的问题,而是 Node.js 环境或依赖没到位。先验证基础:
- 在终端里运行
node -v和npm -v,必须有输出版本号;没有说明 Node.js 没装好或 PATH 没配对 - 确认当前路径下有
package.json和完整的node_modules文件夹;ls node_modules | head -n 5(macOS/Linux)或dir node_modules(Windows)能列出一堆文件才算正常 - 如果
node_modules为空或根本不存在,必须先跑npm install(或yarn install/pnpm install) - Windows 用户遇到
ExecutionPolicy报错,临时切到 cmd 终端,或在 PowerShell 里运行Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
页面空白、端口被占、浏览器打不开
终端显示 Compiled successfully 只代表打包完成,不代表服务可访问。关键要看最后一行日志里的监听地址:
立即学习“前端免费学习笔记(深入)”;
- Vue CLI 默认监听
http://localhost:8080,Vite 默认是http://localhost:5173;但都可能被改过,查vite.config.ts里的server.port或vue.config.js里的devServer.port - 如果提示
Port 5173 is already in use,macOS/Linux 用lsof -i :5173,Windows 用netstat -ano | findstr :5173找 PID,再kill -9 [PID]或taskkill /PID [PID] /F - 临时换端口:加双横线参数,比如
npm run dev -- --port 3001(注意--不能少,也不能写成-) - 页面空白?打开浏览器开发者工具 → Network 标签页,看
index.html是否返回 200,后续的.js文件是否 404 —— 如果是,说明静态资源路径或 base 配置错了
Volar 断点不生效、<script setup> 不识别
这是语言服务没对齐,跟运行无关,但直接影响调试体验:
- 必须装
Volar,并彻底禁用Vetur(二者冲突,禁用不干净会导致.vue文件解析失败) - TypeScript 项目还要装
TypeScript Vue Plugin (Volar) - 在项目根目录的
.vscode/settings.json里加一行:"vue.preferences.experimentalScriptSetupSFCMode": "enabled",否则<script setup>可能被当作文本处理 - VSCode 设置里检查 “TypeScript > Default TypeScript Version” 是否设为 “Use Workspace Version”,否则类型推导会失效
最常被忽略的其实是路径和脚本名的严格匹配——VSCode 终端不会帮你纠错,它只忠实地执行你敲的命令。哪怕多一个空格、少一个点、路径差一层,都会失败,而且错误信息往往藏在堆栈深处。


















