Vue-CLI 3 scp2自动部署项目至服务器的方法

下面是“Vue-CLI 3 scp2自动部署项目至服务器的方法”的完整攻略。

1. 安装scp2与ssh2

首先需要安装scp2和ssh2，可以通过npm安装。

npm install scp2 ssh2 --save-dev

2. 准备打包脚本

在package.json中新增打包脚本命令：

"build:prod": "vue-cli-service build --mode production"

在项目根目录下新建deploy.js文件，编辑代码如下：

const SCP2 = require('scp2');
const SSH2 = require('ssh2');
const ora = require('ora');
const chalk = require('chalk');
const { name, version } = require('./package.json');

const SERVER = {
  host: 'your server ip',
  port: 22,
  username: 'your username',
  password: 'your password',
  path: '/usr/share/nginx/html' // 项目部署路径
};

const localPath = 'dist';
const remotePath = `${SERVER.path}/${name}/${version}`;

const spinner = ora(`正在部署项目：${chalk.cyan(name)}（${chalk.magenta(version)}）`).start();

SCP2.scp(
  localPath,
  {
    ...SERVER,
    path: remotePath
  },
  function(err) {
    if (err) {
      spinner.fail(`部署项目 ${chalk.cyan(name)} 失败`);
      throw err;
    }
    spinner.succeed(`部署项目 ${chalk.cyan(name)} 成功！`);
    SSH2.connect(SERVER);
    SSH2.on('ready', function() {
      SSH2.exec(`cd ${SERVER.path} && rm -rf current && ln -sf ${remotePath} current`, function(
        err,
        stream
      ) {
        if (err) {
          spinner.fail(`创建current链接失败`);
          throw err;
        }
        stream
          .on('close', function() {
            spinner.succeed(`创建current链接成功`);
            SSH2.end();
          })
          .on('data', function(data) {
            console.log('STDOUT: ' + data);
          })
          .stderr.on('data', function(data) {
            console.log('STDERR: ' + data);
          });
      });
    });
  }
);

3. 部署命令

在package.json中新增部署命令：

"deploy": "npm run build:prod && node deploy.js"

4. 执行部署

执行以下命令即可将项目部署至服务器：

npm run deploy

示例说明

示例一

在deploy.js文件中，代码const SERVER = { ... }定义了服务器信息。需要修改为自己的服务器信息。例如，如果服务器是通过密钥认证登录，则需要将username改为服务器登录用户名，将password改为服务器密钥路径。

示例二

在执行部署命令npm run deploy时，会先执行npm run build:prod，打包出dist目录，然后将dist目录通过scp命令部署到服务器上。最后执行ssh命令，将current指向最新的部署版本。

以上两个示例是其中的一部分内容，更详细的内容请参考完整的攻略。