浅谈Vue 自动化部署打包上线


Posted in Javascript onJune 14, 2020

应用场景

项目打包后发布到正式环境,需要后端配合或者前端自己上传到服务器上,操作不便且容易产生问题,比如后台不在的情况而前台没有服务器的信息,这时发布就被延;或者前端自己上传容易导致误操作,如果上传错地方没正确上传都可能导致线上直接崩掉,而这对于已发布的产品而言是致命的。因此,有必要实现自动化部署代码到线上,解放双手的同时也减轻后端兄弟的压力。

项目使用

1、在项目根目录下, 创建 deploy/products.js 文件

/*
 *读取env环境变量
 */
const SERVER_ID = process.env.NODE_ENV === "prod" ? 0 : 1;

/*
 *定义多个服务器账号 及 根据 SERVER_ID 导出当前环境服务器账号
 */
const SERVER_LIST = [
 {
  id: 0,
  name: "A-生产环境",
  domain: "xxx.xxx.xxx", // 域名
  host: "118.31.245.118",
  port: 22,
  username: "root",
  password: "Yrkj1234",
  indexpath: "/var/www/yiqitong/public/theme/index/default/index/",
  assetspath: "/var/www/yiqitong/public/h5-static/"
 },
 {
  id: 1,
  name: "B-测试环境",
  domain: "yiqitong.118.easysoft168.com",
  host: "118.31.245.118",
  port: 22,
  username: "root",
  password: "Yrkj1234",
  indexpath: "/var/www/yiqitong/public/theme/index/default/index/",
  assetspath: "/var/www/yiqitong/public/h5-static/"
 }
];

module.exports = SERVER_LIST[SERVER_ID];

2、在项目根目录下, 创建 deploy/index.js 文件

// deploy/index.js里面
const scpClient = require("scp2");
const ora = require("ora");
const chalk = require("chalk");
const server = require("./products");
const spinner = ora(
 "正在发布到" +
  (process.env.NODE_ENV === "prod" ? "生产" : "测试") +
  "服务器..."
);

var Client = require("ssh2").Client;

var conn = new Client();
conn
 .on("ready", function() {
  // rm 删除dist文件,n 是换行 换行执行 重启nginx命令 我这里是用docker重启nginx
  conn.exec(
   "rm -rf /var/www/yiqitong/public/theme/index/default/index/index.htmln rm -rf /var/www/yiqitong/public/h5-static",
   function(err, stream) {
    if (err) throw err;
    stream
     .on("close", function(code, signal) {
      // 在执行shell命令后,把开始上传部署项目代码放到这里面
      spinner.start();
      scpClient.scp(
       "dist/index.html",
       {
        host: server.host,
        port: server.port,
        username: server.username,
        password: server.password,
        path: server.indexpath
       },
       function(err) {
        if (err) {
         console.log(chalk.red("发布失败.n"));
         throw err;
        } else {
         scpClient.scp(
          "dist/h5-static/",
          {
           host: server.host,
           port: server.port,
           username: server.username,
           password: server.password,
           path: server.assetspath
          },
          function(err) {
           spinner.stop();
           if (err) {
            console.log(chalk.red("发布失败.n"));
            throw err;
           } else {
            console.log(
             chalk.green(
              "Success! 成功发布到" +
               (process.env.NODE_ENV === "prod"
                ? "生产"
                : "测试") +
               "服务器! n"
             )
            );
           }
          }
         );
        }
       }
      );

      conn.end();
     })
     .on("data", function(data) {
      console.log("STDOUT: " + data);
     })
     .stderr.on("data", function(data) {
      console.log("STDERR: " + data);
     });
   }
  );
 })
 .connect({
  host: server.host,
  port: server.port,
  username: server.username,
  password: server.password
 });

3、添加 package.json 中的 scripts 命令, 自定义名称为 "deploy""scripts": {

"serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "test:unit": "vue-cli-service test:unit",
  "deploy:dev": "npm run build && cross-env NODE_ENV=dev node ./deploy",
  "deploy:prod": "npm run build && cross-env NODE_ENV=prod node ./deploy"
 },

运行npm run deploy:dev发布到测试环境;npm run deploy:prod发布到生产环境。至此大功告成。总结这种打包方式可能会存在风险问题,毕竟ip和密码都写在前端。我推荐使用Jenkins自动化打包参考文章segmentfault.com/a/119000001…总结

到此这篇关于浅谈Vue 自动化部署打包上线的文章就介绍到这了,更多相关Vue 自动化部署打包内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
axios基本入门用法教程
Mar 25 Javascript
vue之数据交互实例代码
Jun 16 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 #Javascript
Jquery ajax书写方法代码实例解析
Jun 12 #jQuery
ng-alain的sf如何自定义部件的流程
Jun 12 #Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 #Javascript
基于Web Audio API实现音频可视化效果
Jun 12 #Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 #Javascript
学前端,css与javascript重难点浅析
Jun 11 #Javascript
You might like
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
JavaScript的eval JSON object问题
2009/11/15 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
jQuery插件实现文字无缝向上滚动效果代码
2016/02/25 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
Javascript继承机制详解
2017/05/30 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
javascriptvoid(0)含义以及与"#"的区别讲解
2019/01/19 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
如何利用nodejs自动定时发送邮件提醒(超实用)
2020/12/01 NodeJs
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
对PyTorch torch.stack的实例讲解
2018/07/30 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
python如何实现代码检查
2019/06/28 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
酒店中秋节活动方案
2014/01/31 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
文明村创建实施方案
2014/03/27 职场文书
挂靠协议书
2015/01/27 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
初中同学会致辞
2015/08/01 职场文书
2016猴年春节问候语
2015/11/11 职场文书
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js