Vue自动构建发布脚本的方法示例


Posted in Javascript onJuly 24, 2020

简介

使用cross-env, scp2两个插件完成

cross-env

cross-env这是一款运行跨平台设置和使用环境变量的脚本。

为什么需要cross-env?

NODE_ENV=production 像这样设置环境变量时,大多数Windows命令提示符都会阻塞 。(Windows上的Bash是例外,它使用本机Bash。)同样,Windows和POSIX命令使用环境变量的方式也有所不同。对于POSIX,您可以使用: $ENV_VAR 和在Windows上可以使用 %ENV_VAR% 。
cross-env这样,您就可以使用单个命令,而不必担心为平台正确设置或使用环境变量。就像在POSIX系统上运行时一样,只需对其进行设置即可,并且cross-env会妥善设置。

scp2

scp2是一个基于ssh2的纯JavaScript安全复制程序。ssh2很大程度上由ssh2驱动,scp以某种sftp方式实现。
它是用纯JavaScript编写的,并且可以在每个OS上运行,甚至Windows也可以。必须使用Nodejs(v0.8.7或更高版本)才能使其正常工作。

安装

在项目根目录下一键安装

cnpm install scp2 --save-dev
cnpm install cross-env --save-dev

根目录下创建deploy文件夹, 在deploy目录下创建index.js(代码入口文件), products.js(配置文件和核心代码). 代码如下

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
    // rm -rf /mdm/nginx/dist\ndocker restart nginx
    conn.exec( `cp -r /home/newResource/dist/. /home/newResource/dist${new Date().toLocaleDateString().replace(/\//g,'-')} \nrm -rf /home/newResource/dist` , function(
      err,
      stream
    ) {
      if (err) throw err;
      stream
        .on('close', function(code, signal) {
          // 在执行shell命令后,把开始上传部署项目代码放到这里面
          spinner.start();
          scpClient.scp(
            './dist', {
              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'));
                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
    //privateKey: require('fs').readFileSync('/home/admin/.ssh/id_dsa')
  });

products.js

/*
 *读取env环境变量
 */
const fs = require('fs');
const path = require('path');
// env 文件 判断打包环境指定对应的服务器id
const envfile = process.env.NODE_ENV === 'prod' ? '../.env.prod' : '../.env.dev';
// env环境变量的路径
const envPath = path.resolve(__dirname, envfile);
// env对象
const envObj = parse(fs.readFileSync(envPath, 'utf8'));
const SERVER_ID = parseInt(envObj['VUE_APP_SERVER_ID']);

function parse(src) {
  // 解析KEY=VAL的文件
  const res = {};
  src.split('\n').forEach(line => {
    // matching "KEY' and 'VAL' in 'KEY=VAL'
    // eslint-disable-next-line no-useless-escape
    const keyValueArr = line.match(/^\s*([\w\.\-]+)\s*=\s*(.*)?\s*$/);
    // matched?
    if (keyValueArr != null) {
      const key = keyValueArr[1];
      let value = keyValueArr[2] || '';

      // expand newlines in quoted values
      const len = value ? value.length : 0;
      if (len > 0 && value.charAt(0) === '"' && value.charAt(len - 1) === '"') {
        value = value.replace(/\\n/gm, '\n');
      }

      // remove any surrounding quotes and extra spaces
      value = value.replace(/(^['"]|['"]$)/g, '').trim();

      res[key] = value;
    }
  });
  return res;
}

/*
 *定义多个服务器账号 及 根据 SERVER_ID 导出当前环境服务器账号
 */
const SERVER_LIST = [{
    id: 0,
    name: 'A-生产环境',
    domain: 'www.prod.com', // 域名
    host: 'xxx.xxx.xxx.xxx', // ip
    port: 22, // 端口
    username: 'root', // 登录服务器的账号
    password: 'root', // 登录服务器的账号
    path: '/mdm/nginx/dist' // 发布至静态服务器的项目路径
  },
  {
    id: 1,
    name: 'B-测试环境',
    domain: 'test.xxx.com',
    host: 'xxx.xxx.xxx.xxx',
    port: 22,
    username: 'root',
    password: 'root',
    path: '/home/newResource/dist'
  }
];

module.exports = SERVER_LIST[SERVER_ID];

创建环境配置文件

.env.dev (开发环境)

VUE_APP_SERVER_ID=1

.env.prod (正式环境)

VUE_APP_SERVER_ID=0

package.json文件配置启动项

"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

就可以直接打包编译发布到服务器

参考:https://3water.com/article/191671.htm

到此这篇关于Vue自动构建发布脚本的方法示例的文章就介绍到这了,更多相关Vue自动构建发布脚本内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
潜说js对象和数组
May 25 Javascript
jQuery+css+html实现页面遮罩弹出框
Mar 21 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
简单实现js轮播图效果
Jul 14 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 #Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 #Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 #Javascript
vue+axios全局添加请求头和参数操作
Jul 24 #Javascript
vue在响应头response中获取自定义headers操作
Jul 24 #Javascript
vuex存取值和映射函数使用说明
Jul 24 #Javascript
js实现金山打字通小游戏
Jul 24 #Javascript
You might like
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
shiro授权的实现原理
2017/09/21 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
python图像处理之反色实现方法
2015/05/30 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
Python3访问并下载网页内容的方法
2015/07/28 Python
Python3 处理JSON的实例详解
2017/10/29 Python
Django 实现下载文件功能的示例
2018/03/06 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
python实现二维插值的三维显示
2018/12/17 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
python实现串口通信的示例代码
2020/02/10 Python
python实现井字棋小游戏
2020/03/04 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
python 读取串口数据的示例
2020/11/09 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
农村婚礼主持词
2014/03/13 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
公务员政审材料
2014/12/23 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
《海上日出》教学反思
2016/02/23 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书