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 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
js实现的页面矩阵图形变换特效
Jan 26 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 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
德生PL330测评
2021/03/02 无线电
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
vue-router实现webApp切换页面动画效果代码
2017/05/25 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
vuejs实现递归树型菜单组件
2018/01/13 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
Python编码爬坑指南(必看)
2016/06/10 Python
Python常见异常分类与处理方法
2017/06/04 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
Python读写锁实现实现代码解析
2020/11/28 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
Charlotte Tilbury澳大利亚官网:英国美妆品牌
2018/10/05 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
《匆匆》教学反思
2014/02/22 职场文书
商业房地产广告语
2014/03/13 职场文书
学生个人自我鉴定
2014/03/26 职场文书
员工加薪申请报告
2015/05/15 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
导游词之凤凰古城
2019/10/22 职场文书