前言
目前我们先的部署方式都是本地先执行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,然后直接把目录下的所有内容清空了,包含了一些固定的文件和部署在里面的子目录下的其他项目,吓的我都准备跑路了~,哈哈不过还好是测试环境)
完事~