VSCode不能真机运行微信小程序,所有真机预览、调试、API调用必须依赖微信开发者工具;VSCode仅负责写对代码、保存到位、路径对齐,project.config.json与miniprogramRoot需配对生效,且三个关键开关(启用调试、服务端口、调试基础库sourcemap)须在微信开发者工具中开启。

VSCode 本身不能让小程序“真机运行”,所有真机预览、调试、API 调用都必须走微信开发者工具。你能在 VSCode 里做的,只是写对代码、保存到位、路径对齐——剩下的事,得交给微信开发者工具去完成。
为什么 VSCode 点“运行”或执行 npm run dev 没反应
原生微信小程序项目没有内置启动命令,package.json 里通常只有 eslint、stylelint 这类开发依赖,不包含任何构建或服务逻辑。所谓 npm run dev 多数来自 Taro、uni-app 等框架,并非微信官方支持流程。
-
node app.js或npm start在 VSCode 终端执行会直接报command not found或打开空白页面,因为缺少 WXML 编译器、基础库注入和沙箱环境 - 所谓“微信小程序调试插件”的
Launch in WeChat DevTools功能早已失效,微信未开放远程唤起 + 调试协议 - 真机运行的唯一链路是:VSCode 编辑保存 → 微信开发者工具监听磁盘文件变化 → 自动编译 → 推送到真机
project.config.json 和 miniprogramRoot 必须配对生效
微信开发者工具靠 project.config.json 定位源码位置,而 miniprogramRoot 字段决定它从哪开始找 app.js 和 pages/。这个字段值错了,工具就找不到代码,自然无法真机运行。
公众号运营:文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时,使用本技能。
- 如果源码在项目根目录,
miniprogramRoot应设为"./" - 如果源码在
src/下,就得设为"./src/",且微信开发者工具导入项目时必须选中同一级目录(即含project.config.json的父文件夹) - VSCode 打开的文件夹路径必须与微信开发者工具「导入项目」时选中的路径完全一致,差一个层级都会导致文件监听失败
- 修改
project.config.json后,需在微信开发者工具中右键项目 → 「刷新」,否则变更不生效
真机调试前必须检查三个开关
即使代码写对、路径配准,真机上仍看不到 console 或断点不命中,大概率是这三个设置没开——它们不在 VSCode 里调,全在微信开发者工具内部。
- 右上角「详情」→ 「本地调试」→ ✅ 开启「启用调试」(不是「启用远程调试」,后者已弃用)
- 设置 → 安全设置 → ✅ 开启「服务端口」(默认 56789,自动化脚本依赖此端口)
- 设置 → 调试设置 → ✅ 勾选「启用调试基础库 sourcemap」(该选项默认关闭,不勾选则 TS 断点全部飘移)
- 真机调试时,console 默认不输出到开发者工具控制台;需在真机上摇一摇 → 「打开调试」→ 切换到「vConsole」才能看到日志
最容易被忽略的是:VSCode 里打的断点,从来不是让 VSCode 停住,而是靠微信开发者工具把 source map 映射回传。一旦 tsconfig.json 里 "sourceMap": false,或 outDir 指向错误目录,或微信工具里 sourcemap 开关没开,断点就彻底失效——这种问题查半天,其实只改一行配置就能解决。


















