vue项目需在vs code终端执行npm run dev等脚本启动,依赖package.json的scripts字段,端口和路径需查vue.config.js或vite.config.ts配置。

确认项目根目录下有 package.json 和 vue.config.js(或 vite.config.ts)
VS Code 本身不运行 Vue 项目,它只是编辑器;真正启动的是项目里配置的构建工具(vue-cli 或 vite)。先看 package.json 的 scripts 字段有没有 dev、serve 或 build 这类脚本——这是你实际要执行的命令来源。
- 如果项目用 Vue CLI(老项目常见),通常有
"serve": "vue-cli-service serve" - 如果用 Vite(Vue 3 推荐),一般是
"dev": "vite"或"serve": "vite" - 没找到对应 script?说明还没安装依赖,先在终端运行
npm install或yarn install
在 VS Code 内置终端中执行 npm run dev(或对应 script 名)
别点菜单栏“运行”→“启动调试”,那默认走 Node.js 调试器,不是 Vue 开发服务器。直接打开 VS Code 底部的终端(Ctrl+` 或 View → Terminal),确保路径是项目根目录,然后敲命令:
npm run dev
常见变体:
-
npm run serve(Vue CLI 默认) -
yarn dev(Yarn 用户) -
pnpm dev(pnpm 用户) - 如果提示
command not found: vite或vue-cli-service,说明依赖没装全或没加-g(不推荐全局装)
浏览器打不开 http://localhost:3000 或端口被占?查 package.json 里的端口配置
Vue CLI 默认用 8080,Vite 默认用 5173,但都可能被改过。别猜,直接看配置文件:
立即学习“前端免费学习笔记(深入)”;
- Vue CLI:检查
vue.config.js里是否有devServer.port - Vite:检查
vite.config.ts或vite.config.js的server.port - 没配?就按默认端口访问;配了但被占,终端会报错
ERROR: Port 5173 is already in use,此时要么杀掉占用进程,要么改配置
临时换端口可以加参数:npm run dev -- --port 3001(注意双横线)
终端卡在 Compiled successfully 但页面空白?检查控制台和网络标签页
这大概率不是 VS Code 的问题,而是项目本身出错了。打开浏览器开发者工具(F12),重点看两个地方:
- Console 标签页:有没有
Failed to fetch、Cannot find module、Uncaught ReferenceError - Network 标签页:是否加载了
index.html,但后续的assets/*.js返回 404?常见于base配置错误(比如部署路径写死了/my-app/,但本地开发应为/) - Vite 项目注意:如果用了
defineConfig({ base: './' }),本地开发可能因相对路径失效导致资源 404
这时候 VS Code 只是显示代码,真正要调的是浏览器和终端输出——别只盯着编辑器右下角的状态栏
终端输出的地址就是入口,浏览器访问它就行。复杂点在于:每个 Vue 项目底层工具链不同,script 名、端口、静态资源路径都可能被定制,得看自己项目的实际配置,而不是背一套通用命令。










