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