VUE自動(dòng)化部署全過(guò)程
更新時(shí)間：2025年11月08日 16:28:52 作者：小小荷塘
本文介紹了使用scp2庫(kù)將構(gòu)建后的文件上傳到生產(chǎn)或測(cè)試環(huán)境的方案,包括安裝scp2、編寫(xiě)環(huán)境腳本、忽略腳本、添加npm腳本命令及執(zhí)行步驟,該方法簡(jiǎn)便但不夠安全,適合快速部署
放棄npm run build，再壓縮上傳這種毫無(wú)效率的操作了。
使用scp2將build之后的文件上傳到生產(chǎn)或測(cè)試環(huán)境。
此方案本質(zhì)上就是就是ssh進(jìn)入服務(wù)器，scp本地文件到服務(wù)器。
- 缺點(diǎn)很明顯，不夠安全，不能回滾版本
- 優(yōu)點(diǎn)就是，很簡(jiǎn)便。自行判斷哦
一、安裝scp2
npm install scp2 --save-dev #或 cnpm install scp2 --save-dev
二、寫(xiě)好測(cè)試環(huán)境和生產(chǎn)環(huán)境的腳本
例如測(cè)試環(huán)境 dev.js、生產(chǎn)環(huán)境pro.js 放項(xiàng)目根目錄下
- 內(nèi)容：dev.js
const client = require('scp2');
const ora = require('ora');
const chalk = require('chalk');
const spinner = ora(chalk.green('正在發(fā)布到測(cè)試服務(wù)器...'));
spinner.start();
client.scp('./dist/', { // 本地打包文件的位置
"host": 'XXX.XX.XX.XXX', // IP地址
"port": 'XX', // 服務(wù)器端口
"username": 'XXX', // 用戶名
"password": '*****', // 密碼
"path": '/www/wwwroot/test' // 項(xiàng)目路徑
}, err =>{
spinner.stop();
if (!err) {
console.log(chalk.green("測(cè)試服務(wù)器部署完畢。"))
} else {
console.log("err", err)
}
})
- 內(nèi)容：pro.js
const client = require('scp2');
const ora = require('ora');
const chalk = require('chalk');
const spinner = ora(chalk.green('正在發(fā)布到生產(chǎn)服務(wù)器...'));
spinner.start();
client.scp('./dist/', { // 本地打包文件的位置
"host": 'XXX.XX.XX.XXX', // IP地址
"port": 'XX', // 服務(wù)器端口
"username": 'XXX', // 用戶名
"password": '*****', // 密碼
"path": '/www/wwwroot/pro' // 項(xiàng)目路徑
}, err =>{
spinner.stop();
if (!err) {
console.log(chalk.green("生產(chǎn)服務(wù)器部署完畢。"))
} else {
console.log("err", err)
}
})
三、在.gitignore中忽略node腳本
#不要把服務(wù)器的賬號(hào)密碼傳到git上哦 乖 pro.js dev.js
四、在package.json中添加腳本命令
"pro":"node pro.js", "test":"node dev.js"
五、執(zhí)行node腳本
npm run build npm run test
先執(zhí)行npm run build，再執(zhí)行npm run test將打包的文件上傳到服務(wù)器上，一旦build的文件有問(wèn)題還來(lái)得及反悔哦。
如果想一步到位，請(qǐng)看第六步
六、一步到位版本
"pro":"node pro.js", "test":"node dev.js", "upro":"npm run build && npm run pro", "utest":"npm run build && npm run test"
例如：
執(zhí)行 npm run upro 這個(gè)命令之后，它會(huì)先npm run build執(zhí)行打包命令，然后，執(zhí)行node pro.js，將打包的文件上傳到生產(chǎn)服務(wù)器上
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue的過(guò)度與動(dòng)畫(huà)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
vue中報(bào)錯(cuò)Duplicate?keys?detected:'1'.?This?may?c
我們?cè)趘ue開(kāi)發(fā)過(guò)程中常會(huì)遇到一些錯(cuò)誤,這篇文章主要給大家介紹了關(guān)于vue中報(bào)錯(cuò)Duplicate?keys?detected:‘1‘.?This?may?cause?an?update?error的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Vue實(shí)現(xiàn)push數(shù)組并刪除的例子
今天小編就為大家分享一篇Vue實(shí)現(xiàn)push數(shù)組并刪除的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
使用VUE實(shí)現(xiàn)一鍵復(fù)制內(nèi)容功能
這篇文章主要介紹了使用VUE實(shí)現(xiàn)一鍵復(fù)制內(nèi)容功能,功能就是當(dāng)我們點(diǎn)擊復(fù)制按鈕時(shí)，會(huì)提示“復(fù)制成功”，這樣復(fù)制的內(nèi)容就可以在其他地方使用了，感興趣的朋友可以學(xué)習(xí)一下2023-04-04
深入探索Vue中樣式綁定的七種實(shí)現(xiàn)方法
在?Vue.js?開(kāi)發(fā)中,合理地控制元素的樣式對(duì)于構(gòu)建高質(zhì)量的用戶界面至關(guān)重要,Vue?提供了靈活的方式來(lái)綁定樣式,這篇文章將探索?Vue?中設(shè)置樣式的七種做法,并結(jié)合代碼,逐步說(shuō)明每種方法的實(shí)現(xiàn),需要的朋友可以參考下2024-03-03
vue單應(yīng)用在ios系統(tǒng)中實(shí)現(xiàn)微信分享功能操作
這篇文章主要介紹了vue單應(yīng)用在ios系統(tǒng)中實(shí)現(xiàn)微信分享功能操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
這篇文章主要介紹了Vue中自定義日志打印插件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue組件開(kāi)發(fā)之LeanCloud帶圖形校驗(yàn)碼的短信發(fā)送功能
Vue是目前使用較廣泛的三大前端框架之一，其數(shù)據(jù)驅(qū)動(dòng)及組件化的特性使得前端開(kāi)發(fā)更為快捷便利。本文在LeanCloud 短信轟炸與圖形校驗(yàn)碼官方文檔 基礎(chǔ)上，從封裝需要出發(fā)開(kāi)發(fā)一個(gè)簡(jiǎn)單的短信圖形驗(yàn)證Vue組件,具體內(nèi)容詳情大家參考下本文2017-11-11
Vue3中watchEffect和watch的基礎(chǔ)應(yīng)用詳解
watch是一個(gè)偵聽(tīng)器，默認(rèn)是懶偵聽(tīng)的，即僅在偵聽(tīng)源發(fā)生變化時(shí)才執(zhí)行回調(diào)函數(shù)，watchEffect是會(huì)自動(dòng)收集函數(shù)里面變量的響應(yīng)式依賴，本文主要來(lái)講講二者的區(qū)別，感興趣的可以了解一下2023-07-07
vscode 插件開(kāi)發(fā) + vue的操作方法
這篇文章主要介紹了vscode 插件開(kāi)發(fā) + vue的操作方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06