Vue前端自动化部署

以前部署项目，一般分为两种方式：

第一种：直接上传。build打包  ->  利用Scp命令行或FTP将dist目录中的文件上传至服务器Web环境根目录下。缺点：重复多个步骤。繁琐。

第二种：利用git服务器。ssh进入web服务器  ->  执行git clone或git pull将项目克隆至服务器  ->  执行npm install  ->  执行npm run build。缺点：1、服务器需要预安装node + npm；2、服务器上多了不需要的Vue项目源码。

实现自动化部署：

优点：仅需一个命令，实现项目部署至web服务器。

项目安装依赖：

npm install scp2 ora --save-dev

//scp2是一个纯js编写的ssh2协议的Linux远程文件拷贝实现。

//ora是一个优雅的用于命令行Loading的spinner

根目录新建：deploy.js

const scpClient = require('scp2')

const ora = require('ora')

const server = {

    host:'xxx.xxx.xxx.xxx',//服务器IP

    port:22,//服务器端口

    username:'xxxxxx',//服务器ssh登录用户名

    password:'xxxxxx',//服务器ssh登录密码

    path:'/www/xxxx/xxxx'//服务器web目录

};

const loading = ora('正在部署至【' + server.host + '】服务器')

loading.start()

scpClient.scp('dist/', server ,(err)=>{

loading.stop()

    if(err) {

        console.log('部署失败')

        throw err

    }else {

        console.log('部署成功')

    }

})

在package.json中的script中添加命令

"scripts": {

        ....

        ....

        "deploy": "npm run build && node ./deploy.js",

        ....

        ....

  },

个人经验，如有不足。各位大哥欢迎指点。