前言

一般Vue项目的部署过程，npm run build打包->FTP上传到服务器,但是每次打包之后都需要手动通过FTP软件来把新的dist文件夹覆盖原来对应的服务器目录。这样子好像有点麻烦，我希望通过一句命令，例如npm run push就能完成这一系列的步骤，所有有了所谓的自动化部署，下面让我详细谈谈两种实现的方法。

第一种方法：修改package.json

通过package.json自定义命令执行内容，然后执行npm run 指令。
这里有几个问题需要注意，scp -r /dist/ root@42.192.141.179:/www/wwwroot/targetFloder这句命令是linux系统中用来进行文件传输的命令，-r表示递归，也就是把dist文件夹递归上传到服务器42.192.141.179的 /www/wwwroot/targetFloder 目录，记得把我的服务器ip改为你自己的。 PS：服务器要有对应的文件夹，要不然你怎么传啊xd。

"scripts": {
    "dev": "npm run serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    
    //执行打包，并上传至服务器指定目录
    "buildToProduct": "npm run build && scp -r dist/* root@42.192.141.179:/www/wwwroot/targetFloder",
     //上传至服务器指定目录
    "push": "scp -r dist/* root@42.192.141.179:/www/wwwroot/targetFloder"
  },

让我们试试，执行npm run buildToProduct,结果如图：此时，执行完npm run build之后要上传到服务器提示需要输入用户root的密码，所以我输完密码之后，文件就会开始上传，如图：

如何解决每次都需要输入密码的问题

步骤一（生成ssh key）

生成ssh key：使用git bash或者powershell执行ssh-keygen可以生成ssh key。会询问生成的key存放地址，直接回车就行，如果已经存在，则会询问是否覆盖，如果存在的话就输入n。

步骤二（同步ssh key到远程服务器）

ssh-copy-id -i ~/.ssh/id_rsa.pub root@117.78.4.26

输入密码后，之后再次同步就不需要输入密码了。其实ssh_key是同步到了服务器（此处是root用户家目录）~/.ssh/authorized_keys 文件里：当然你也可以手动复制本地~/.ssh/id_rsa.pub（注意是pub结尾的公钥）文件内容追加到服务器~/.ssh/authorized_keys的后面（从命名可以看出该文件可以存储多个ssh key）注意：这里全程使用的是root用户，所以没有文件操作权限问题。如果你的文件夹创建用户不是远程登录用户，或许会存在同步文件失败的问题，此时需要远程服务器修改文件夹的读写权限（命令 chmod）。

第二种方法：写入nodejs脚本

同样在package里面自定义npm run 指令，然后在自己的项目根目录下面编写node执行脚本。

步骤一（定义指令）

package.json里面自定义npm run 指令

"scripts": {
    "dev": "npm run serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    
     //上传至服务器指定目录
    "upload": "npm run build && node upload.js"
  },

步骤二（添加node脚本）

在项目根目录下面,添加upload.js

const client = require('scp2');
const ora = require('ora');
const chalk = require('chalk');
const spinner = ora(chalk.green('正在发布到测试服务器...'));
spinner.start();

client.scp('./dist/', { // 本地打包文件的位置
	"host": '***.***.***.***', // IP地址
	"port": '22', // 服务器端口
	"username": '***', // 用户名
	"password": '***', // 密码
	"path": '/www/wwwroot/targetFolder' // 项目路径
}, err => {
	spinner.stop();
	if (!err) {
		console.log(chalk.green("部署完毕。"))
	} else {
		console.log("err", err)
	}
})

步骤三（安装node依赖包）

因为upload.js需要依赖包scp2、ora、chalk，所以先安装依赖包。

npm i scp2 ora chalk -D

步骤四（测试）

总结

按我的愚昧见解，自动化部署就是使用命令来代替手动上传文件的操作，本文的自动化部署其实就是利用linux scp文件传输的命令。但是我有另外一疑问，如何实现版本的回滚呢，毕竟出现bug的时候，回滚操作是比较常见的。希望有大佬可以指点我一下。目前我使用的是git提交版本，当需要回滚的时候，我就把git版本切换之后再进行上传服务器。

本文参考的链接：
mp.weixin.qq.com/s/qggBoEega…
blog.csdn.net/qq_36990263…

前端Vue超简单自动化部署

前言