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 相关文章推荐
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 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
PHP中for循环语句的几种变型
2007/03/16 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
Convert Seconds To Hours
2007/06/16 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
理解javascript中的闭包
2017/01/11 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
Python运算符重载详解及实例代码
2017/03/07 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
python实现在线翻译功能
2020/03/03 Python
python数据类型强制转换实例详解
2020/06/22 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
自主招生自荐书
2013/11/29 职场文书
财务担保书范文
2014/04/02 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
vue el-table实现递归嵌套的示例代码
2022/08/14 Vue.js