vue-cli3項(xiàng)目打包后自動(dòng)化部署到服務(wù)器的方法
更新時(shí)間：2020年09月16日 10:38:58 作者：_xixi_
這篇文章主要介紹了vue-cli3項(xiàng)目打包后自動(dòng)化部署到服務(wù)器的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
一、安裝 scp2
npm install scp2 --save-dev
二、寫好腳本
例如 upload.js （下面任選一個(gè)即可）
位置和 package.json平級即可。
簡略版
'use strict'
// 引入scp2
var client = require('scp2');
client.scp('./dist/', { // 本地打包文件的位置
"host": 'XXX.XX.XX.XXX', // 服務(wù)器的IP地址
"port": 'XX', // 服務(wù)器端口， 一般為 22
"username": 'XXX', // 用戶名
"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)美化所用 可有可無
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', // 用戶名
"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ù)器地址、用戶以及密碼
三、在 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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue構(gòu)建動(dòng)態(tài)表單的方法示例
這篇文章主要介紹了vue構(gòu)建動(dòng)態(tài)表單的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue如何自定義配置運(yùn)行run命令，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了在Vue中使用Echarts++封裝,需要的朋友可以參考下2023-11-11
vue在install時(shí)node-sass@4.14.1?postinstall:node?scripts/buil
最近在npm install 的時(shí)候遇到了個(gè)問題,所以給大家總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于vue在install時(shí)node-sass@4.14.1?postinstall:node?scripts/build.js錯(cuò)誤的解決方法,需要的朋友可以參考下2023-05-05
解決vue3報(bào)錯(cuò):Unexpected?mutation?of?“xxx“?prop.(eslintvue/no
這篇文章主要給大家介紹了關(guān)于如何解決vue3報(bào)錯(cuò):Unexpected?mutation?of?“xxx“?prop.(eslintvue/no-mutating-props)的相關(guān)資料,文中通過代碼將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
眾所周知，vue 的 mixins 是個(gè)非常靈活，但又很容易帶來混亂的 API，Mixins 本該是一種強(qiáng)大的重用代碼的手段，但使用之后往往帶來更多的混亂，代碼變得不易維護(hù)，本文就詳細(xì)介紹Vue Mixin的正確用法,需要的朋友可以參考下2023-06-06
vue 封裝導(dǎo)出Excel數(shù)據(jù)的公共函數(shù)的方法
本文主要介紹了vue 封裝導(dǎo)出Excel數(shù)據(jù)的公共函數(shù)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue出現(xiàn)Uncaught SyntaxError:Unexpected token問題及解決
這篇文章主要介紹了vue出現(xiàn)Uncaught SyntaxError:Unexpected token問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要為大家介紹了vue3?emits事件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
vue項(xiàng)目中jsonp跨域獲取qq音樂首頁推薦問題
這篇文章主要介紹了vue項(xiàng)目中jsonp跨域獲取qq音樂首頁推薦問題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05