vue-cli3項(xiàng)目打包后自動(dòng)化部署到服務(wù)器的方法
一、安裝 scp2
npm install scp2 --save-dev
二、寫(xiě)好腳本
例如 upload.js （下面任選一個(gè)即可）
位置和 package.json平級(jí)即可。
簡(jiǎn)略版
'use strict'
// 引入scp2
var client = require('scp2');
client.scp('./dist/', { // 本地打包文件的位置
"host": 'XXX.XX.XX.XXX', // 服務(wù)器的IP地址
"port": 'XX', // 服務(wù)器端口， 一般為 22
"username": 'XXX', // 用戶(hù)名
"password": '*****', // 密碼
"path": 'XXX' // 項(xiàng)目部署的服務(wù)器目標(biāo)位置
}, err =>{
if (!err) {
console.log("項(xiàng)目發(fā)布完畢!")
} else {
console.log("err", err)
}
})
稍微美化下控制臺(tái)的輸出
'use strict'
// 引入scp2
var client = require('scp2');
// 下面三個(gè)插件是部署的時(shí)候控制臺(tái)美化所用 可有可無(wú)
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', // 服務(wù)器的IP地址
"port": 'XX', // 服務(wù)器端口， 一般為 22
"username": 'XXX', // 用戶(hù)名
"password": '*****', // 密碼
"path": 'XXX' // 項(xiàng)目部署的服務(wù)器目標(biāo)位置
}, err =>{
spinner.stop();
if (!err) {
console.log(chalk.green("項(xiàng)目發(fā)布完畢!"))
} else {
console.log("err", err)
}
})
✨記得項(xiàng)目git上傳時(shí)忽略此文件, 因?yàn)檫@里面包含了你的服務(wù)器地址、用戶(hù)以及密碼
三、在 package.json中添加 scripts 命令
"upload": "node upload.js", "deploy": "npm run build && npm run upload"
四、執(zhí)行腳本
npm run deploy
運(yùn)行這個(gè)腳本命令之后，它會(huì)先npm run build執(zhí)行打包命令，然后，執(zhí)行node upload.js,將打包的文件上傳到服務(wù)器
到此這篇關(guān)于vue-cli3項(xiàng)目打包后自動(dòng)化部署到服務(wù)器的方法的文章就介紹到這了,更多相關(guān)vue-cli3打包自動(dòng)化部署到服務(wù)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-cli對(duì)element-ui組件進(jìn)行二次封裝的實(shí)戰(zhàn)記錄
組件類(lèi)似于需要多個(gè)地方用到的方法,在Vue中組件就是一種復(fù)用（經(jīng)常使用）一個(gè)功能的手段,下面這篇文章主要給大家介紹了關(guān)于Vue?element?ui二次封裝的相關(guān)資料,需要的朋友可以參考下2022-06-06
element el-tree組件的動(dòng)態(tài)加載、新增、更新節(jié)點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了element el-tree組件的動(dòng)態(tài)加載、新增、更新節(jié)點(diǎn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
本篇文章主要介紹了詳解vue嵌套路由-params傳遞參數(shù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
在一般情況下,vue項(xiàng)目代碼部署發(fā)布只需將代碼打包后直接上傳到服務(wù)器即可,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包并發(fā)布的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
基于Vue3+Element Plus 實(shí)現(xiàn)多表單校驗(yàn)demo
表單校驗(yàn)在日常的開(kāi)發(fā)需求中是一種很常見(jiàn)的需求,通常在提交表單發(fā)起請(qǐng)求前校驗(yàn)用戶(hù)輸入是否符合規(guī)則,通常只需formRef.value.validate()即可校驗(yàn),本文給大家介紹基于Vue3+Element Plus 實(shí)現(xiàn)多表單校驗(yàn)demo,感興趣的朋友一起看看吧2024-06-06
詳解vue-router的導(dǎo)航鉤子(導(dǎo)航守衛(wèi))
這篇文章主要介紹了詳解vue-router的導(dǎo)航鉤子(導(dǎo)航守衛(wèi))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
在Vue項(xiàng)目中引入騰訊驗(yàn)證碼服務(wù)的教程
這篇文章主要介紹了在Vue項(xiàng)目中引入騰訊驗(yàn)證碼服務(wù)的教程,需要的朋友可以參考下2018-04-04
這篇文章主要為大家介紹了vue實(shí)現(xiàn)At人文本輸入框示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue使用v-model封裝el-pagination組件的全過(guò)程
通過(guò)封裝el-pagination組件開(kāi)發(fā)自定義分頁(yè)組件的類(lèi)似文章網(wǎng)上已經(jīng)有很多了，但看了一圈，總是不如意，于是決定還是自己動(dòng)手搞一個(gè)，對(duì)v-model封裝el-pagination組件相關(guān)知識(shí)感興趣的朋友一起看看吧2021-07-07
vue iview的菜單組件Mune 點(diǎn)擊不高亮的解決方案
今天小編就為大家分享一篇vue iview的菜單組件Mune 點(diǎn)擊不高亮的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11