應用場景

項目打包后發(fā)布到正式環(huán)境，需要后端配合或者前端自己上傳到服務器上，操作不便且容易產(chǎn)生問題，比如后臺不在的情況而前臺沒有服務器的信息，這時發(fā)布就被延；或者前端自己上傳容易導致誤操作，如果上傳錯地方?jīng)]正確上傳都可能導致線上直接崩掉，而這對于已發(fā)布的產(chǎn)品而言是致命的。因此，有必要實現(xiàn)自動化部署代碼到線上，解放雙手的同時也減輕后端兄弟的壓力。

項目使用

1、在項目根目錄下, 創(chuàng)建 deploy/products.js 文件

/* *讀取env環(huán)境變量 */const SERVER_ID = process.env.NODE_ENV === 'prod' ? 0 : 1;/* *定義多個服務器賬號 及 根據(jù) SERVER_ID 導出當前環(huán)境服務器賬號 */const SERVER_LIST = [ { id: 0, name: 'A-生產(chǎn)環(huán)境', domain: 'xxx.xxx.xxx', // 域名 host: '118.31.245.118', port: 22, username: 'root', password: 'Yrkj1234', indexpath: '/var/www/yiqitong/public/theme/index/default/index/', assetspath: '/var/www/yiqitong/public/h5-static/' }, { id: 1, name: 'B-測試環(huán)境', domain: 'yiqitong.118.easysoft168.com', host: '118.31.245.118', port: 22, username: 'root', password: 'Yrkj1234', indexpath: '/var/www/yiqitong/public/theme/index/default/index/', assetspath: '/var/www/yiqitong/public/h5-static/' }];module.exports = SERVER_LIST[SERVER_ID];

2、在項目根目錄下, 創(chuàng)建 deploy/index.js 文件

// deploy/index.js里面const scpClient = require('scp2');const ora = require('ora');const chalk = require('chalk');const server = require('./products');const spinner = ora( '正在發(fā)布到' + (process.env.NODE_ENV === 'prod' ? '生產(chǎn)' : '測試') + '服務器...');var Client = require('ssh2').Client;var conn = new Client();conn .on('ready', function() { // rm 刪除dist文件，n 是換行 換行執(zhí)行 重啟nginx命令 我這里是用docker重啟nginx conn.exec( 'rm -rf /var/www/yiqitong/public/theme/index/default/index/index.htmln rm -rf /var/www/yiqitong/public/h5-static', function(err, stream) { if (err) throw err; stream .on('close', function(code, signal) { // 在執(zhí)行shell命令后，把開始上傳部署項目代碼放到這里面 spinner.start(); scpClient.scp( 'dist/index.html', {host: server.host,port: server.port,username: server.username,password: server.password,path: server.indexpath }, function(err) {if (err) { console.log(chalk.red('發(fā)布失敗.n')); throw err;} else { scpClient.scp( 'dist/h5-static/', { host: server.host, port: server.port, username: server.username, password: server.password, path: server.assetspath }, function(err) { spinner.stop(); if (err) { console.log(chalk.red('發(fā)布失敗.n')); throw err; } else { console.log( chalk.green( 'Success! 成功發(fā)布到' + (process.env.NODE_ENV === 'prod'? '生產(chǎn)': '測試') + '服務器! 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 });

3、添加 package.json 中的 scripts 命令, 自定義名稱為 'deploy''scripts': {

'serve': 'vue-cli-service serve', 'build': 'vue-cli-service build', 'lint': 'vue-cli-service lint', 'test:unit': 'vue-cli-service test:unit', '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發(fā)布到測試環(huán)境；npm run deploy:prod發(fā)布到生產(chǎn)環(huán)境。至此大功告成。總結(jié)這種打包方式可能會存在風險問題，畢竟ip和密碼都寫在前端。我推薦使用Jenkins自動化打包參考文章segmentfault.com/a/119000001…總結(jié)

到此這篇關于淺談Vue 自動化部署打包上線的文章就介紹到這了,更多相關Vue 自動化部署打包內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網(wǎng)！