vscode的uploadonsave无法自动上传构建产物,因其仅响应手动保存的源文件,不监听npm run build生成的dist文件;正确做法是关闭uploadonsave,构建后右键dist文件夹执行“sftp: upload folder”。

能实现,但必须拆开做:Node 构建和 SFTP 同步是两个独立动作,uploadOnSave 不会等构建完成再传,直接上传源码也没用——你得先 npm run build 出 dist,再把 dist 里文件同步过去。
为什么不能靠 uploadOnSave 自动传构建产物
uploadOnSave 只监听本地文件保存事件,它不管这个文件是不是构建结果。你改 src/index.ts 保存,插件就传这个 .ts 文件;但 dist/main.js 是构建生成的,不是你手动保存的,uploadOnSave 根本不触发。
- 构建产物(如
dist/)通常被ignore列表排除,默认不会上传 - 即使去掉 ignore,
uploadOnSave也只响应“你主动保存”的文件,不响应npm run build输出的新文件 - 构建过程可能跨多个文件生成,时间上和保存动作无关联,无法靠文件系统事件自动捕获
正确做法:用 npm script 组合构建 + 同步命令
在 package.json 里定义一条脚本,让构建完成后立刻调用 SFTP 插件的手动上传功能:
{
"scripts": {
"deploy:test": "npm run build && npx sftp-upload --config .vscode/sftp.json --remotePath /var/www/test --localPath dist"
}
}
但注意:sftp-upload 不是官方插件自带的 CLI 工具——VSCode SFTP 插件本身没有命令行接口。所以更实际的做法是:
- 用
npm run build生成dist/ - 在 VSCode 里右键
dist文件夹 → “SFTP: Upload Folder” - 或写一个轻量 wrapper 脚本(比如
deploy.sh),调用npm run build后用scp或rsync推送dist/,绕过插件限制
如果坚持用 VSCode 插件,必须关掉 uploadOnSave 改手动触发
启用 uploadOnSave 反而会干扰:它可能在你编辑源码时误传 src/ 下未构建的文件到服务器,导致测试环境运行错版本。
- 把
sftp.json中的"uploadOnSave": false - 确保
"remotePath"指向测试服务器上部署目录(如/var/www/test),且该路径已存在、可写 - 构建完成后,只对
dist文件夹右键 → “SFTP: Upload Folder”,这样传的才是最终产物 - 别依赖 “watcher” 或 “autoUpload” 字段——它们在新版插件中已被弃用或行为不稳定
容易被忽略的权限与路径细节
很多失败不是配置错,而是卡在底层权限或路径语义上:
-
remotePath必须是远程服务器上**已存在的绝对路径**,插件不会自动创建父目录 - 登录用户(如
ubuntu)必须对remotePath有写权限;若目标目录属主是www-data,需提前sudo chown -R ubuntu:ubuntu /var/www/test - 私钥路径不能用
~,必须写成完整路径,例如"privateKeyPath": "/home/user/.ssh/id_rsa" - Windows 用户注意反斜杠转义:
"privateKeyPath": "C:\Users\user\.ssh\id_rsa"或用正斜杠"C:/Users/user/.ssh/id_rsa"











