1. 程式人生 > 程式設計 >vue-cli3專案打包後自動化部署到伺服器的方法

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("專案釋出完畢!")
 } 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('正在釋出到伺服器...'));
spinner.start();

client.scp('./dist/',err =>{
 spinner.stop();
 if (!err) {
 console.log(chalk.green("專案釋出完畢!"))
 } else {
 console.log("err",err)
 }
})

✨記得專案git上傳時忽略此檔案,因為這裡麵包含了你的伺服器地址、使用者以及密碼
三、在 package.json中新增 scripts 命令

"upload": "node upload.js","deploy": "npm run build && npm run upload"

四、執行指令碼

npm run deploy

執行這個指令碼命令之後,它會先npm run build執行打包命令,然後,執行node upload.js,將打包的檔案上傳到伺服器

到此這篇關於vue-cli3專案打包後自動化部署到伺服器的方法的文章就介紹到這了,更多相關vue-cli3打包自動化部署到伺服器內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!