介绍 npm安装scp2——save-dev //.env.dev文件中
VUE_APP_SERVER_ID=0 //.env.prod文件中
VUE_APP_SERVER_ID=1 /*
*读取env环境变量
*/const fs=要求(& # 39;fs # 39;);
const path=要求(& # 39;path & # 39;);//env文件判断打包环境指定对应的服务器id
const envfile=process.env。NODE_ENV===& # 39;促使# 39;？ & # 39;. ./.env.prod& # 39;:& # 39;. ./.env.dev& # 39;;//env环境变量的路径
const envPath=路径。解决(__dirname envfile);//env对象
const envObj=解析(fs。readFileSync (envPath & # 39; use utf8 # 39;));
const SERVER_ID=方法(envObj [& # 39; VUE_APP_SERVER_ID& # 39;]);
函数解析(src) {//解析关键=VAL的文件
const res={};
src.split (& # 39; \ n # 39;)。forEach(行=比;｛//匹配“关键# 39;和& # 39;val # 39;& # 39;关键=val # 39;//eslint-disable-next-line no-useless-escape
const keyValueArr=line.match (/^ \ s * ((\ w \。\] +) \ s *=\ s * (. *) ? \ s */美元);//匹配?
如果(keyValueArr !=null) {
const关键=keyValueArr [1];
让价值=https://www.yisu.com/zixun/keyValueArr [2] | |”;//扩大换行引用值
const len=价值?价值。长度:0;
如果(len> 0 & & value.charAt(0)===& &价值”。charAt (len - 1)===薄? {
价值=价值。替换(/\ n/通用,' \ n ');
}//删除任何周围的引用和额外的空间
价值=value.replace(/(^[’] |[的]美元)/g) .trim ();
res(例子)=价值;
}
});
返回res;
}/*
*定义多个服务器账号及根据SERVER_ID导出当前环境服务器账号
*/const SERVER_LIST=[
｛
id: 0,
名称:“A -生产环境”,
域:' www.prod.com ',//域名
主持人:' 46.106.38.24 ',//ip//端口:22日端口
用户名:“根”,//登录服务器的账号
密码:“Rock@sz18 !',//登录服务器的账号
路径:/mdm/nginx/dist//发布至静态服务器的项目路径
},
｛
id: 1、
名称:“B -测试环境”,
域:“test.xxx.com”,
主持人:“XX.XX.XX.XX”,
端口:22日
用户名:“根”,
密码:“xxxxxxx”,
路径:/usr/地方/www/xxx_program_test/}
]；
模块。出口=SERVER_LIST [SERVER_ID]; const scpClient=要求(& # 39;scp2& # 39;);
const ora=要求(& # 39;奥拉# 39;);
const粉笔=要求(& # 39;粉笔# 39;);
const服务器=需要(& # 39;。/产品# 39;);
const转轮=奥拉(& # 39;正在发布到& # 39;+ (process.env。NODE_ENV===& # 39;促使# 39;？ & # 39;生产& # 39;:& # 39;测试& # 39;)+ & # 39;服务器……& # 39;);
spinner.start ();
scpClient.scp (
& # 39;dist/& # 39;
｛
主持人:server.host,
端口:server.port,
用户名:server.username,
密码:server.password,
路径:server.path
},
函数(err) {
spinner.stop ();
如果(err) {
console.log (chalk.red(& # 39;发布失败。\ n # 39;));
把犯错;
其他}{
console.log (chalk.green(& # 39;成功!成功发布到& # 39;+ (process.env。NODE_ENV===& # 39;促使# 39;？ & # 39;生产& # 39;:& # 39;测试& # 39;)+ & # 39;服务器!\ n # 39;));
}
}
);
这篇文章将为大家详细讲解有关Vue-CLI 3。x自动部署项目至服务器的方法是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
前言:平时部署前端项目流程是:先部署到测试环境好后再发布到生产环境上,部署到测试环境用xshell连上服务器,然后用xftp连接服务器,然后本地构建项目,接着把构建好的文件通过xftp上传到服务器上,整个流程感觉稍有繁琐,重复。
本教程讲解的是Vue-CLI 3。x脚手架搭建的vue项目,利用scp2自动化部署到静态文件服务器Nginx
<强>一,安装scp2
scp2是一个基于ssh3增强实现,纯粹使用JavaScript编写。
而ssh3就是一个使用nodejs对于SSH2的模拟实名现. scp,是安全复制的缩写,scp是Linux系统下基于SSH登陆进行安全的远程文件拷贝命令。这里我们就用这个功能,在vue编译构建成功之后,将项目推送至测试/生产环境,以方便测试,提高效率。
安装scp2:
<强>二,配置测试/生产环境服务器SSH远程登陆账号信息
1。在项目根目录下,创建.env.dev文件(测试环境变量)
VUE_APP_SERVER_ID变量表示当前需部署的测试服务器ID为0
2。在项目根目录下,创建.env。促使文件(生产环境变量)
VUE_APP_SERVER_ID变量表示当前需部署的生产服务器ID为1
3。在项目根目录下,创建部署/产品。js文件
<强>三、使用scp2库,创建自动化部署脚本
在项目根目录下,创建部署/索引。js文件
