将项目自动部署到服务器的方法

前言

平时部署前端项目的过程是：先部署到测试环境ok再发布到生产环境，然后用xshell连接到服务器，再用xftp连接到服务器，然后在本地构建项目，再通过xftp将构建好的文件上传到服务器。整个过程感觉有点繁琐和重复。

本教程解释了由vue-CLI 3.x支架构建的Vue项目，该项目由scp2自动部署到静态文件服务器Nginx

安装scp2后

Scp2是基于ssh2的增强实现，它完全是用JavaScript编写的。

而SSH2是使用nodejs对ssh2的模拟实现。Scp，安全复制的缩写，是Linux系统中基于SSH登录的安全远程文件复制命令。在这里，我们利用这个功能，在Vue编译构建成功后，将项目推送到测试/生产环境中，方便测试，提高效率。

要安装scp2:

npm安装scp2 -保存-开发

其次，配置测试/生产环境服务器的SSH远程登录帐户信息

1.在项目的根目录下，创建env.dev文件(测试环境变量)

VUE应用服务器标识变量表示当前要部署的测试服务器标识为0

//中的VUE_APP_SERVER_ID=02。env.dev文件创建。项目根目录下的env.prod文件(生产环境变量)

VUE应用服务器标识变量表示当前要部署的生产服务器标识为1

//.env.prod文件中的vue _ app _ server _ id in。在项目的根目录下创建deploy/products.js文件

/* *读取env环境变量*/const fs=require(' fs ')；const path=require(' path ')；//env文件确定打包环境指定了对应的服务器id const env文件=process.env.node _ env==' prod '？'./.env.prod' : './. env . dev '；env环境变量const envpath的路径=path。resolve(_ dirname，en file)；//env object const en obj=parse(fs . readfilesync(en path，' utf8 '))；const SERVER _ ID=ParSeint(EnvObj[' VUE _ APP _ SERVER _ ID '])；函数解析(src) {//用KEY=VAL const res={}解析文件；src.split('\n ')。forEach(line={ //在' KEY=VAL '/eslint-disable-next-line no-无用-escape const key valuearr=line.match(/^\s*([\w\.中匹配' key '和' val '\-] )\s*=\s*。*)?\ s * $/)；//匹配？if (keyValueArr！=null){ const key=KeyValueArr[1]；let value=KeyValueArr[2]| | ' '；//展开引用值中的换行符const len=value？value . length : 0；if(len 0 value . charat(0)==' ' ' value . charat(len-1)===' ' '){ value=value . replace(/\ \ n/GM，' \ n ')；} //删除任何周围的引号和多余的空格值=value.replace(/(^['']|['']$)/g ' ')。trim()；res[key]=值；} });返回res}/* *根据SERVER _ ID */const SERVER _ list=[{ ID :0，name : ' a-production environment '，domain in : ' www . prod.com '，//域名host3360' 46.106.38.24 '，//IP port3360 22，//端口用户名3360' root '，//登录服务器帐户password 3360 '[emailprotected]！'，//帐户路径： '/mdm/nginx/dist'/发布到静态服务器的项目路径}，{id: 1，name: 'B- test environment '，domain3360' test.xxx.com '，host:' xx.xx '。