應用場景

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

項目使用

1、在項目根目錄下, 創建 deploy/products.js 文件

/* *讀取env環境變量 */const SERVER_ID = process.env.NODE_ENV === 'prod' ? 0 : 1;/* *定義多個服務器賬號 及 根據 SERVER_ID 導出當前環境服務器賬號 */const SERVER_LIST = [ { id: 0, name: 'A-生產環境', 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-測試環境', 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、在項目根目錄下, 創建 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( '正在發布到' + (process.env.NODE_ENV === 'prod' ? '生產' : '測試') + '服務器...');var Client = require('ssh2').Client;var conn = new Client();conn .on('ready', function() { // rm 刪除dist文件，n 是換行 換行執行 重啟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) { // 在執行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('發布失敗.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('發布失敗.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 });

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發布到測試環境；npm run deploy:prod發布到生產環境。至此大功告成。總結這種打包方式可能會存在風險問題，畢竟ip和密碼都寫在前端。我推薦使用Jenkins自動化打包參考文章segmentfault.com/a/119000001…總結

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