Vue-前端自动化部署方案-scp2(实战版)

兜里只有三分钱~2024-06-02 15:46

Vue-前端自动化部署方案-scp2

首先安装所需的npm插件

Bash 复制代码

Node14之前
npm install scp2 //自动化部署
npm install ora //美化控制台
npm install chalk //美化控制台
Node14之后
import client from 'scp2'
import ora from 'ora'
import chalk from 'chalk'

使用方式

在根级目录新增upload.js

c 复制代码

// 引入scp2
const client = require("scp2");
const ora = require("ora");
const chalk = require("chalk");
const spinner = ora(chalk.green("正在发布中..."));
spinner.start();

client.scp(
  "./dist/",// 本地打包文件位置
  {
    host: "xx.xx.2xx.2xx", // 服务器的IP地址
    port: "xx", // 服务器端口
    username: "root", // 用户名
    password: "password", // 密码
    path: "/home/web/admin", // 项目部署的服务器目标位置(注意是放前端文件的文件夹路径)
  },
  (err) => {
    spinner.stop();
    if (!err) {
      console.log(chalk.green("项目发布完毕!"));
    } else {
      console.log("err", err);
    }
  }
);

package.json中scripts 新增 "deploy": "npm run build && npm run upload"

c 复制代码

npm run deploy //自动将前端打包好的dist包部署到服务器配置的文件目录下

命令执行结束后自动将dist包上传到服务器。