基于VSCode的Node项目自动化构建与一键SFTP同步测试服务器环境

阿静君_1774

阿静君_1774

2026-07-08

290人浏览

原创

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

基于vscode的node项目自动化构建与一键sftp同步测试服务器环境

能实现,但必须拆开做: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 插件的手动上传功能:

jinn-node
jinn-node

在Jinn网络为自主项目工作赚取代币奖励,让闲置的OpenClaw代理开始工作。

下载
{
  "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"

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

vscode node

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
服务器是什么
服务器是什么

服务器是一种计算机硬件设备或软件程序,它具有强大的计算和存储能力,用请求、存储数据和提供服务。它在互联网中着关重要的作用,为用户提供各种服务和资源。本专题为大家提供服务器相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.15

417

5

连接apple id服务器时出错
连接apple id服务器时出错

连接apple id服务器时出错的原因包括网络连接问题、服务器问题、Apple ID账户问题、设备问题、防火墙或安全软件问题、时间和日期设置问题、Apple服务器维护等。本专题为大家提供apple id相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.08

840

5

搭建互联网服务器
搭建互联网服务器

搭建互联网服务器需要:1、选择合适的硬件和操作系统,第一步是选择合适的硬件和操作系统;2、安装和配置操作系统,是搭建互联网服务器的关键步骤;3、安装和配置服务器软件,是搭建互联网服务器的下一步,常见的服务器软件包括Apache、Nginx、Tomcat等;4、配置防火墙和安全性,是搭建互联网服务器的重要步骤;5、域名解析和配置,是搭建互联网服务器的最后一步。

2023.09.19

2492

5

如何查看服务器状态
如何查看服务器状态

查看服务器状态的方法有使用命令行工具、图形界面工具、监控工具、日志文件和远程管理工具等。本专题为大家提供服务器状态相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.09

836

5

服务器域名转接慢怎么解决
服务器域名转接慢怎么解决

服务器域名转接慢的解决办法有DNS优化、服务器优化、CDN加速、前端优化和网络优化等。本专题为大家提供服务器相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.17

749

5

服务器评测软件
服务器评测软件

服务器评测软件有PassMark Software、CPU-Z、GPU-Z、CrystalDiskMark、IOmeter、JMeter、LoadRunner、Apache Bench等等。详细介绍:1、PassMark Software是一款综合性的服务器性能测试软件,可以评估服务器在各种负载条件下的性能;2、CPU-Z是一款可以提供服务器CPU详细信息的软件等等。

2023.10.17

394

3

如何开启TFTP服务器
如何开启TFTP服务器

开启TFTP服务器的步骤包括选择TFTP服务器软件、下载和安装软件、配置TFTP服务器以及启动和测试服务器等。本专题为大家提供服务器相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.18

2236

4

服务器负载不兼容怎么解决
服务器负载不兼容怎么解决

解决方法:1、增加服务器资源;2、负载均衡;3、优化应用程序;4、增加缓存机制;5、分布式架构;6、限流和熔断;7、自动化扩容。想知道更详细服务器负载不兼容的解决方法,可以访问本专题下面的文章。

2023.10.20

4112

4

宽带如何接入服务器
宽带如何接入服务器

宽带接入服务器的方法有ADSL宽带接入服务器、光纤接入服务器、无线接入服务器和以太网接入服务器等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.20

667

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程