vue项目打包完成后自动化部署

前端每次打包完成项目后都需要连接服务器上传到指定文件夹，这样子很繁琐也很浪费摸鱼的时间，所以我根据学到的打包钩子突然奇想，利用package.json文件执行的脚本完成打包并自动部署一体化，我的思路是打包完成后压缩文件夹然后上传至服务器目录进行解压替换，我可能不是第一个想到这种方法的，但也是根据自己的思想总结出来的，整体实现如下。

每次打包都会执行npm run build 这个命令，这个脚本里有一个前置钩子(pre)和后置钩子(post)，分布运行与脚本运行前执行和运行后执行，比如你的打包命令是build，则后置钩子就是postbuild，当然你的打包命令也可以不为build，自定义的名称也可以，只要在前面加上post就是后置钩子；下面代码中的postbuild（&&代表继发执行，执行完前面再执行后面；&代表并行执行，同时执行），tar zcvf dist.tar.gz dist 这一段是压缩打包好的文件夹为dist.tar.gz，后面是执行build.js文件，build.js文件创建在package.josn同级下；如有报错可参考我使用node版本16.17.0。

package.json的脚本

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "postbuild": "echo 开始压缩文件上传至服务器 && tar zcvf dist.tar.gz dist && node build.js"
  },

build.js

首先你要有一台可ssh连接的服务器，填写好配置后更改你的服务器部署目录，我的目录如下图，记得替换代码中你的目录。

记得安装npm i ssh2

//先安装ssh2 ( npm i ssh2 )
const Client = require('ssh2').Client;
let conn = new Client();

connect()

// 上传压缩包到服务器指定目录
function connect() {
    conn.on('ready', () => {
        conn.sftp((err, sftp) => {
            sftp.fastPut('./dist.tar.gz', '/www/wwwroot/cj.wzhyt.cn/dist.tar.gz', {}, (err, result) => {
                //上传完成后开始解压
                Shell(conn)
            })
        })
    }).on('error', async err => {
        console.log('Client 链接错误', err.toString())
    }).connect({
        host: '', //ip
        port: 22, //默认22端口
        username: 'root', //默认root用户名
        password: '', //服务器密码
        readyTimeout: 10000 //响应超时时间
    })
}

// 服务器解压操作
function Shell(conn) {
    conn.shell((err, stream) => {
        stream.end(
            `
             cd /www/wwwroot/cj.wzhyt.cn
             tar zxvf dist.tar.gz
             mv dist/* /www/wwwroot/cj.wzhyt.cn
             rm -rf dist.tar.gz
             rm -rf dist
             exit
            `
            /* 以上命令按顺序执行
            * 进入服务器部署地址
            * 解压上传的压缩包
            * 移动解压好的文件夹下所有的文件到指定目录下
            * 删除压缩包
            * 删除压缩后的文件夹
            * 退出
            * */
        ).on('data', data => {
            console.log(data.toString())
        }).on('close', () => {
            conn.end()
            console.log("服务器自动化部署完成")
        })
    })
}

控制台看到部署完成的提示才表示部署成功了

访问地址：http://cj.wzhyt.cn