当前位置: 首页 > Linux

五步带你完成vue-cli项目打包一键部署(测试)服务

时间:2023-04-06 20:32:34 Linux

初始化vue项目,测试服务就绪(前提是准备好了)注:可以使用vue2.0~3.0一键部署1.在根目录新建deploy文件夹:.env.dev类内容如下VUE_APP_SERVER_ID=0.env.prod类内容如下VUE_APP_SERVER_ID=1index.js文件类内容如下:constscpClient=require('scp2');constora=require('ora');constchalk=require('粉笔');constserver=require('./products');constspinner=ora('发布到'+server.name+'server...\n');constspinnerCopy=ora('备份到'+server.name+'server...\n');constssh2=new(require('ssh2').Client)();//添加的版本constcompressing=require('compressing');//生成压缩包的名称(根据自己的需要自定义)constfilePath="./"+(newDate()).getTime()+server.assetsRoot.replace('./','')+".zip";ssh2.on('ready',()=>{console.log(chalk.green('连接服务成功...'));ssh2.exec("rm-rf"+server.path+'/static',(err,stream)=>{console.log(chalk.green('删除缓存历史文件...\n'));if(err){console.log(chalk.red('删除失败。\n'));抛出错误;}stream.on("c丢失",()=>{ssh2.end();uploadFile();backups();});});}).connect({host:server.host,port:server.port,username:server.username,password:server.password,path:server.path});//上传文件functionuploadFile(){spinner.start();scpClient.scp(server.assetsRoot,{host:server.host,port:server.port,username:server.username,password:server.password,path:server.path},function(err){spinner.stop();if(err){console.log(chalk.red('发布失败.\n'));throwerr;}else{console.log(chalk.green('成功!成功发布到'+server.name+'服务器!\n'));}});}/***将文件复制到服务器*/functionbackups(){spinnerCopy.开始();console.log(chalk.green('\n正在生成压缩文件,请稍候!\n'));compressing.zip.compressDir(server.assetsRoot,filePath).then(()=>{scpClient.scp(filePath,{主机:server.host,端口:server.port,用户名:server.username,密码:server.password,path:server.path},function(err){spinnerCopy.stop();if(err){console.log(chalk.red('Backupfailed.\n'));throwerr;}else{控制台。log(chalk.green('Success!成功备份到'+server.name+'Server!\n'));}});}).catch(err=>{console.error(err);spinnerCopy.stop();console.log(chalk.red('备份失败。\n'));throwerr;});返回“成功”;}products.js文件如下:/**读取env环境变量*/constfs=require('fs');常量路径=要求再('路径');//env文件决定了打包环境并指定对应的serveridconstenvfile=process.env.NODE_ENV==='prod'?'./.env.prod':'./.env.dev';//env环境变量的路径constenvPath=path.resolve(__dirname,envfile);//环境对象constenvObj=parse(fs.readFileSync(envPath,'utf8'));constSERVER_ID=parseInt(envObj['VUE_APP_SERVER_ID']);functionparse(src){//使用KEY=VAL解析文件constres={};src.split('\n').forEach(line=>{//匹配'KEY=VAL'中的"KEY'和'VAL'//eslint-disable-next-lineno-useless-escapeconstkeyValueArr=line.match(/^\s*([\w\.\-]+)\s*=\s*(.*)?\s*$/);//匹配?if(keyValueArr!=null){constkey=keyValueArr[1];letvalue=keyValueArr[2]||'';//在引用值中扩展换行符constlen=value?value.length:0;if(len>0&&value.charAt(0)==='"'&&value.charAt(len-1)==='"'){value=value.replace(/\\n/gm,'\n');}//删除任何周围的引号和多余的空格value=value.replace(/(^['"]|['"]$)/g,'').trim();res[键]=值;}});返回资源;}/**定义多个服务器账号,根据SERVER_ID导出当前环境服务器账号*/constSERVER_LIST=[{id:0,name:'A-test环境',domain:'',//域名assetsRoot:'./dist',//新版本host:'192.168.66.66',//ipport:22,//端口用户名:'root',//登录服务器的账号password:'root',//账号登录服务器路径:'/home/wwwroot/default/ceShi/Vue3.0'//发布到静态服务器的项目路径},{id:1,name:'B-官方环境',domain:'',//域名host:'192.168.66.66',//ipassetsRoot:'./dist',//新版本port:22,//端口username:'root',//登录账号intotheserverpassword:'root',//登录服务器的账号路径:'/home/wwwroot/default/Vue3.0/'//发布到静态服务器项目路径}];模块.exports=SERVER_LIST[SERVER_ID];2.在配置文件package.json中添加一键部署命令{"name":"one-key-upload","version":"0.1.0","private":true,"scripts":{"serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild",//注意在新建类内容中需要下载辅助插件"deploy:dev":"npmrunbuild&&cross-envNODE_ENV=devnode./deploy","deploy:prod":"npmrunbuild&&cross-envNODE_ENV=prodnode./deploy"},"dependencies":{"core-js":"^2.6.5","vue":"^2.6.6","vue-router":"^3.0.1","vuex":"^3.0.1","ora":"^3.4.0"},"devDependencies":{"@vue/cli-plugin-babel":"^3.5.0","@vue/cli-service":"^3.5.0","stylus":"^0.54.5","stylus-loader":"^3.0.2","vue-template-compiler":"^2.5.21","cross-env":"^5.2.0","scp2":"^0.5.0"}}3。下载对应的安装包npmi-Dcross-envscp2oracompressing4。安装完成后,配置服务器的账号密码地址,打开deploy/products.js/**定义多个服务器账号,根据SERVER_ID导出当前环境服务器账号*/constSERVER_LIST=[{id:0,name:'A-测试环境',domain:'',//域名assetsRoot:'./dist',//新版本host:'192.168.66.66',//serverip(我在本地虚拟机上运行)port:22,//portusername:'root',//登录到服务器账号密码:'root',//登录服务器的账号路径:'/home/wwwroot/default/ceShi/Vue3.0'//发布到静态服务器的项目路径},{id:1,name:'B-官方环境',domain:'',//域名assetsRoot:'./dist',//新版本host:'192.168.66.66',//ipport:22,//端口用户名:'root',//登录服务器的账号密码:'root',//登录服务器的账号路径:'/home/wwwroot/default/Vue3.0/'//发布到的项目路径thestaticserver}打开index.js修改你需要的上传的文件路径如下:eg:deploy=>products.js=>assetsRoot(对应你上传的目录)5.所有配置完成后,运行-点击压缩上传命令npmrundeploy:prod//这里我使用的是生产环境,大家可以根据个人需要自行控制。一般如果没有报错,就会提示上传成功。只需刷新页面即可生效。如果本文对您有帮助,请动动您的小手收藏一下吧!注:与上一版本相比,新增功能为:自动删除服务器老版本文件