[vue]scp2+cross-env自动打包部署

一、安装scp2和cross-env

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

二、设置相关环境变量

看着配置哈，懂的都懂。

• .env文件

  不过使用cross-env的话，可以不必在.env中设置NODE_ENV。

NODE_ENV=prod # 设置环境为prod
# NODE_ENV=devlop 设置环境为devlop

• .env.prod文件

  用于生产环境，为production简写

VUE_APP_API_BASE_URL=x.x.x.x:8000

• .env.devlop文件

  通常用于开发环境，为development简写

VUE_APP_API_BASE_URL=x.x.x.x:8000

三、创建scp2自动化部署脚本

复制粘贴，改配置，傻瓜式操作。

3.1 版本一 简易版本

// 引入scp2
var client = require('scp2')
// 下面三个插件用于deploy时美化控制台，可有可无
const ora = require('ora')
const chalk = require('chalk')
const spinner = ora(chalk.green('正在发布到服务器...'))

const myServer =  {
  'host': '你的服务器ip',
  'port': '22',
  'username': '你的用户名',
  'password': '你的密码',
  'path': '/opt/nginx/html'
}

client.scp('./dist/', myServer, err => {
  spinner.stop()
  if (!err) {
    console.log(chalk.green("项目发布完毕！"))
  } else {
    console.log("err", err)
  }
})

3.2 版本二 加了点花里花哨

//  deploy/index.js里面
const scpClient = require('scp2');
const ora = require('ora');
const chalk = require('chalk');
const server = require('./products');
const spinner = ora(
    '正在发布到' +
    (process.env.NODE_ENV === 'prod' ? '生产' : '测试') +
    '服务器...'
);
const myServer =  {
  'host': '你的服务器ip',
  'port': '22',
  'username': '你的用户名',
  'password': '你的密码',
  'path': '/opt/nginx/html'  // nginx的html地址
}
let Client = require('ssh2').Client;

let conn = new Client();
conn
    .on('ready', function() {
    // rm 删除dist文件，\n 是换行 换行执行 重启nginx命令 
    // docker restart nginx 重启nginx
    // nginx -s reload 重启nginx
    conn.exec('rm -rf /etc/nginx/dist\nnginx -s reload', function(
              err,
               stream
              ) {
        if (err) throw err;
        stream
            .on('close', function(code, signal) {
            // 在执行shell命令后，把开始上传部署项目代码放到这里面
            spinner.start();
            scpClient.scp(
                './dist',
                myServer,
                function(err) {
                    spinner.stop();
                    if (err) {
                        console.log(chalk.red('发布失败.\n'));
                        throw err;
                    } else {
                        console.log(
                            chalk.green(
                                'Success! 成功发布到' +
                                (process.env.NODE_ENV === 'prod'
                                 ? '生产'
                                 : '测试') +
                                '服务器! \n'
                            )
                        );
                    }
                }
            );

            conn.end();
        })
            .on('data', function(data) {
            console.log('STDOUT: ' + data);
        })
            .stderr.on('data', function(data) {
            console.log('STDERR: ' + data);
        });
    });
})
    .connect({
    host: myServer.host,
    port: myServer.port,
    username: myServer.username,
    password: myServer.password
    //privateKey: require('fs').readFileSync('/home/admin/.ssh/id_dsa')
});

四、package.json 配置

自定义部署的scripts 命令, 一般定义名称为 “deploy”。

"scripts": {
    "serve": "vue-cli-service serve --mode dev",
    "build": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint",
    "deploy:dev": "npm run build && cross-env NODE_ENV=develop node ./deploy",
    "deploy:prod": "npm run build && cross-env NODE_ENV=prod node ./deploy",
},

现在就可以用npm run deploy:prod舒服地打包部署到服务器上了。