浅谈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 相关文章推荐
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
Angular6中使用Swiper的方法示例
Jul 09 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
js实现简易计算器小功能
Nov 18 Javascript
vue.js watch经常失效的场景与解决方案
Jan 07 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中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
基于jquery的图片懒加载js
2010/06/30 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
JS变量及其作用域
2017/03/29 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
Python算法之栈(stack)的实现
2014/08/18 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
顶岗实习计划书
2014/01/10 职场文书
卫校中专生的自我评价
2014/01/15 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
团结演讲稿范文
2014/05/23 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
创业计划书之养殖业
2019/10/11 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
python模拟浏览器 使用selenium进入好友QQ空间并留言
2022/04/12 Python
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android