vite配置sftp自动部署

前言

目前我们先的部署方式都是本地先执行npm run build后再将dist里面的内容手动上传到服务器上，还比较麻烦，而且，现在项目多了还偶然会发串包~。 所以我想要是可以打包后自动化上传就好了，之前的webpakc项目有做过，现在的项目都是使用vite，经过一番搜索后也实现了，记录一下

安装

这里需要用到一款vite插件sftp-uploader

$ yarn add sftp-uploader
$ npm i sftp-uploader

配置

// vite.config.js
const path = require('path')
const sftpUploader = require('sftp-uploader')

const sftpConfig = {
  dir: path.join(__dirname, 'dist/'), // 需要上传文件的目录
  url: '******', // 上传到的目录
  host: '*****', // sftp地址
  port: '*****', // sftp端口
  username: '*****', // 账号
  password: '*****', // 密码
  // 延迟上传时间（毫秒），解决部分项目会触发多次打包完成的问题
  delay: 0,
  // 上传文件过滤器，可以过滤掉不需要的文件，返回false将不会上传该文件（可选）
   uploadFilter: (file) => {
   	  console.log(file)
   	  return false
   },
  //! 删除文件过滤器，可以过滤掉不需要删除的文件，返回false将不会删除文件（可选）
  //!!! 注意这里，如果不返回false,会将上传目录下的所有文件清空
  deleteFilter: (file) => {
  	console.log(file)
    return false
  }
  // 预览链接接地址（可选）
  previewPath: '',
}

export default defineConfig({
  plugins: [
    react(),
    sftpUploader(sftpConfig)
  ]
})

然后再build命令上加上参数

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "set UPLOAD=true && vite build",
    "preview": "vite preview"
  },
}

至此，只要执行打包后就会自动上传了，再也不用去手动传了（又可以愉快的摸鱼了）

• ps:有个特别的注意事项(上面注释里也说明了，这里再说下)， 在上面的配置项中的deleteFilter，虽然他文档上写的是可以过滤掉不需要删除的文件，这里还是建议直接返回false,全都不删除。有重复的会自动覆盖掉的。 （我第一次就没有ruturn false，然后直接把目录下的所有内容清空了，包含了一些固定的文件和部署在里面的子目录下的其他项目，吓的我都准备跑路了~，哈哈不过还好是测试环境）

完事~