前言
对于小型公司，使用jenkins实现工作流就有点厚重了，尤其是内网测试的时候更显得厚重，所以很多公司依然在用FTP上传文件的方式。
网上流行的FTP自动化流，通常是使用node脚本：
- 优势：可以自由配置，定制化程度高，可以根据打包命令来决定上传到哪个服务器，真正的一键完成。
- 缺点：配置起来麻烦。
VS Code插件方案：
- 优势：配置起来简单。
- 缺点：因为不是自己写的脚本，所以可能不那么放心，如果开自动同步的话，你不晓得是否真的同步了以及是否同步完成了，如果改成手动同步，又不如node脚本一键完成那么方便。
所以你可以根据需要，自行选择使用哪个方案，下面我介绍一下VS Code插件方案。
原理
配置一个文件，让插件自动将项目的dist文件夹传到服务器。
安装
从扩展中搜索sftp，安装即可。
配置
Windows/Linux用Ctrl+Shift+P，Mac用Cmd+Shift+P打开命令面板，输入SFTP: config即可打开配置文件，只要修改任意字符，就会在工程根目录自动存入.vscode/sftp.json文件。默认是这样：
{
"name": "My Server",
"host": "localhost",
"protocol": "sftp",
"port": 22,
"username": "username",
"remotePath": "/",
"uploadOnSave": true
}
大部分配置说明见：
https://github.com/liximomo/vscode-sftp/wiki/config
为什么说是“大部分”呢，因为有些配置项只出现在了：
https://marketplace.visualstudio.com/items?itemName=liximomo.sftp
比如profiles。
我只说几个值得一说的：
路径的写法
本地路径省略最前的斜杠，比如"context": "dist",，远程路径不能省略最前的斜杠。
syncOption
- delete：服务器文件夹如果有这次上传文件之外的文件，是否删除它们。通常应为false
- skipCreate：服务器没有的文件和文件夹是否跳过创建，显然应该创建，因此设为false
- ignoreExisting：跳过升级服务器已有的文件，显然也应该是false
- update：它意思是，是否只当dist文件夹的某文件有更新，才上传到服务器。应当设为true，可以节省一些流量和时间。
watcher
- files：需要监听的文件，因为要监听dist文件夹的所有文件，所以可设为
**/*.*。另外，"uploadOnSave"一定要设为false - autoUpload：当然true
- autoDelete：当然false
实例
根据官方说明，我配置成了这个样子：
[{
"name": "213服务器",
"context": "dist",
"host": "39.101...（隐去）",
"protocol": "sftp",
"port": 8213,
"username": "root",
"password": "...（隐去）",
"remotePath": "/opt/do/item/vue/yl_dist",
"uploadOnSave": false,
"syncOption": {
"delete": false,
"skipCreate": false,
"ignoreExisting": false,
"update": true
},
"ignore": [],
"watcher": {
"files": "**/*.*",
"autoUpload": true,
"autoDelete": false
}
}]
配置完可能需要重启VS Code才能生效。
使用
现在你有两种选择，要么自动上传，要么手动上传。
- 自动上传：就像上面的配置文件，其中保持
autoUpload为true即可。别的什么都不用管。 - 手动上传：
autoUpload设为false，然后打包，然后在VS Code左侧资源管理器右击dist文件夹，点击SFTP: Sync Local -> Remote即可，VS Code下方会有上传进度提示。尤其其他文件夹，点击按钮的话，会有报错提示。
高级用法：使用profiles选项配置多个远程服务器
上面说的是一个dist对应一个服务器，即便多个配置对象，也只能是选择不同的dist目录，这样实践中显然不够用，所以你可以使用profiles选项，给同一个dist配置多个服务器，比如：
[{
"name": "213服务器",
"context": "dist",
"host": "隐去",
"protocol": "sftp",
"port": 8213,
"username": "root",
"password": "隐去",
"remotePath": "/opt/do/item/vue/yl_dist",
"uploadOnSave": false,
"syncOption": {
"delete": false,
"skipCreate": false,
"ignoreExisting": false,
"update": true
},
"ignore": [],
"watcher": {
"files": "**/*.*",
"autoUpload": false,
"autoDelete": false
},
"profiles": {
"wai": {
"remotePath": "/opt/do/item/vue/yl_dist"
},
"appli": {
"remotePath": "/opt/do/item/vue/yl_dist/app"
}
}
}]
于是乎，现在你就有了3个profiles，分别是UNSET、wai、appli。
切换profile的办法：Windows/Linux用Ctrl+Shift+P，Mac用Cmd+Shift+P打开命令面板，输入SFTP: Set Profile，然后就可以切换。
总结
这个插件的文档写的太简单，需要猜。
切换profile需要手动，可能经常忘记切换，从而导致上传混乱，而node脚本根据你的yarn命令就已经能自我判断。
如果你的工作流足够简单，可以试试这个方案。
