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 相关文章推荐
图片完美缩放
Sep 07 Javascript
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
Mar 05 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
什么是SOLID
Mar 24 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初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
js控制滚动条缓慢滚动到顶部实现代码
2013/03/20 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
Python colormap库的安装和使用详情
2020/10/06 Python
Python-split()函数实例用法讲解
2020/12/18 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
廉洁自律承诺书2015
2015/01/22 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书