序言：今天折腾了半天jenkins，想实现持续集成，奈何服务器不给力（应该是人的问题），硬是没有搞定，所以就找了找其他替代方案，还真找到了，用前端插件，实现一条命令自动部署前端项目

分三步实现

1，安装插件

css 复制代码

npm i shelljs ssh2-sftp-client --save-dev

2，编写插件配置

在根目录下新建一个upload文件夹，里面新建config.js 和index.js文件

我这里有四个文件是因为我有两个环境，一个测试环境，一个生产环境,测试环境配置和生产一样，只是上传的路径不同，这里不再赘述

java 复制代码

//config.js
module.exports = {
  ip: "120.46.156.99", // ssh地址
  username: "root", // ssh 用户名
  port: "22",      //端口
  password: "xxxxxxxx", // ssh 密码
  path: '/usr/local/nginx/html/shop/dist', // 操作开始文件夹 可以直接指向配置好的地址
  rmpath: '/usr/local/nginx/html/shop/dist', // 需要删除的文件夹
}

javascript 复制代码

// index.js
const config = require('./config.js')
const shell = require('shelljs')
const path = require('path')
let Client = require('ssh2-sftp-client')
// 打包 npm run build
const compileDist = async () => {
  if (shell.exec(`npm run build`).code == 0) {//判断是否打包完成
    console.log("打包成功")
  }
}
 
async function connectSSh () {
  let sftp = new Client()
  sftp.connect({
    host: config.ip, // 服务器 IP
    port: config.port,
    username: config.username,
    password: config.password
  }).then(() => {
    console.log("先执行删除服务器文件")
    return sftp.rmdir(config.rmpath, true)
  }).then(() => {
    // 上传文件
    console.log("开始上传")
    return sftp.uploadDir(path.resolve(__dirname, '../dist'), config.path)
  }).then(() => {
    console.log("上传完成")
    sftp.end()
  }).catch((err) => {
    console.log(err, '失败')
    sftp.end()
  })
}
async function runTask () {
  await compileDist()     //打包完成
  await connectSSh()      //提交上传
}
runTask()

3，编写自动部署指令

erlang 复制代码

...
"scripts": {
    "dev": "vite",
    "build": "vite build",
    "upload": "node upload/index.js",
    "upload:dev": "node upload/index_dev.js",
    "preview": "vite preview",
    "test:unit": "vitest"
},
  ...

结束

使用这个自动化部署命令的前提是你的项目之前就已经成功部署，用这个命令指示替换之前手动上传文件到服务器部署

一个命令自动部署前端项目

分三步实现

1，安装插件

2，编写插件配置

3，编写自动部署指令

结束