Vue打包并自动部署到指定服务器

前端全栈分享站

已于 2023-04-19 21:35:51 修改

阅读量453

点赞数 1

分类专栏： vue 栏文章标签： vue.js 服务器 javascript

于 2023-04-13 21:52:37 首次发布

优快云-CRJ

本文链接：https://blog.youkuaiyun.com/CRJ453027119/article/details/130139606

版权

vue 栏专栏收录该内容

16 篇文章

订阅专栏

文章讲述了如何在Vue项目的根目录下配置依赖，如SCP2、Chalk、SSH2和Cross-env，用于自动化部署。通过创建upload.server.js文件，设置服务器信息，使用SCP2进行文件传输，SSH2进行服务器交互，实现将本地构建的dist目录删除并替换到远程服务器的指定路径，从而完成项目的发布。在package.json中添加执行脚本，可以一键打包并上传项目到服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装需要的依赖

npm install scp2 --save-dev
npm install chalk --save-dev
npm install ssh2 --save-dev
npm install cross-env --save-dev

在vue项目根目录新建upload.server.js文件

// 服务器配置信息
const server = {
  host: '192.168.211.230', // 服务器ip
  port: '22', // 端口一般默认22
  username: 'root', // 用户名
  password: '******', // 密码
  serverPath: '/home/project/frontend/',  // 服务器路径（结尾加/）
  packageName: 'dist', // 上传到服务器的位置
  localPath:'./dist/' // 本地打包文件路径
}
 
// 引入scp2
const client = require('scp2');
const ora = require('ora');
const spinner = ora('正在发布到服务器...');
 
// 创建shell脚本
const Client = require('ssh2').Client;
const conn = new Client();
 
console.log('正在建立连接');
conn.on('ready', function () {
  console.log('已连接')
  if(!server.packageName){
    console.log('连接已关闭');
    conn.end()
    return false;
  }
  // 这里我拼接了放置服务器资源目录的位置 ，首选通过rm -rf删除了这个目录下的文件
  conn.exec('rm -rf ' + server.serverPath + server.packageName + '/*', function (err, stream) {
    console.log('删除文件');
    stream.on('close', function (code, signal) {
      console.log('开始上传')
      spinner.start();
      client.scp(server.localPath, {
        "host": server.host,
        "port": server.port,
        "username": server.username,
        "password": server.password,
        "path": server.serverPath + server.packageName
      }, err => {
        spinner.stop();
        if (!err) {
          console.log('项目发布完毕');
        } else {
          console.log("err", err);
        }
        conn.end(); // 结束命令
      })
    }).on('data', function (data) {
        console.log('STDOUT: ' + data);
    }).stderr.on('data', function (data) {
      console.log('STDERR: ' + data);
    });
  })
}).connect({
  host: server.host,
  port: server.port,
  username: server.username,
  password: server.password
  // privateKey: '' // 使用密钥登录
});

在package.json中"scripts"节点新加执行方法

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test": "vue-cli-service build --mode test",
    "build:docker": "vue-cli-service build --dest=./docker/dist/",
    "lint": "vue-cli-service lint",
    "analyze": "vue-cli-service build --report",

    "upload": "node upload.server.js", // 上传
    "publish": "npm run build:prod && npm run upload" // 打包并上传到服务器
  }