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