Vue主动构建公布脚本

简介

应用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-devcnpm 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 文件 判断打包环境指定对应的服务器idconst 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://www.jianshu.com/p/bfa...