浅谈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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
Element实现动态表格的示例代码
Aug 02 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
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
十天学会php(2)
2006/10/09 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
基于jQuery试卷自动排版系统
2010/07/18 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
js Date概念详细介绍
2013/11/22 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
wxPython窗口中文乱码解决方法
2014/10/11 Python
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python中字符串的处理技巧分享
2016/09/17 Python
python设置环境变量的作用整理
2020/02/17 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
极简的HTML5模版
2015/07/09 HTML / CSS
美国手机支架公司:PopSockets
2019/11/27 全球购物
什么是封装
2013/03/26 面试题
《赶海》教学反思
2014/04/20 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
爱心捐款活动总结
2015/05/09 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers
HTML+JS实现在线朗读器
2022/02/15 Javascript