Vue CLI 3 x 部署專案至生產伺服器

2022-09-11 07:12:06 字數 1814 閱讀 9670

本教程主要講解的是 vue-cli 3.x 腳手架搭建的vue專案, 先構建生成dist檔案(純靜態應用), 然後自動化部署到靜態檔案伺服器 nginx。

一、nginx伺服器檔案的配置

server 


}server 


}
二、配置生產/測試環境 伺服器ssh遠端登陸賬號1. 在專案根目錄下, 建立 .env 檔案 (當前環境變數)

2. 在專案根目錄下, 建立 deploy/products.js 檔案

該檔案功能如下:

(1) 讀取env環境變數

const fs = require('fs')


const path = require('path')


//env環境變數的路徑


const envpath = path.resolve(__dirname, '../.env')


//env物件


const envobj = parse(fs.readfilesync(envpath, 'utf8'))


function


parse (src) 


src.split('\n').foreach(line =>


//remove any surrounding quotes and extra spaces


value = value.replace(/(^['"]|['"]$)/g, '').trim()


res[key] =value}})


return


res}
(2) 定義多個伺服器賬號 及 根據 server_id 匯出當前環境伺服器賬號

const server_list =[


,  ,  


]module.exports = server_list[server_id]
三、建立自動化部署指令碼 (使用scp2庫)在專案根目錄下, 建立 deploy/index.js 檔案

const scpclient = require('scp2')


const ora = require('ora')


const chalk = require('chalk')


const server = require('./products')


const spinner = ora('正在發布到生產伺服器...')


spinner.start()


scpclient.scp('dist/', , 


function


(err)  


else


})
四、新增 package.json 中的 scripts 命令, 自定義名稱為 "deploy"

"scripts":
五、執行部署任務在專案根目錄下 執行 npm run deploy命令, 或 使用 vue ui控制面板執行deploy任務, 即可自動打包並部署至線上伺服器

備註:

要切換部署的伺服器, 只需修改 .env檔案中的伺服器id, 然後再執行deploy任務即可.

福利:

Vue CLI 3 X 部署專案至生產伺服器

本教程主要講解的是 vue cli 3.x 腳手架搭建的vue專案,先構建生成dist檔案 純靜態應用 然後自動化部署到靜態檔案伺服器 nginx。一 nginx伺服器檔案的配置 server server 二 配置生產 測試環境 伺服器ssh遠端登陸賬號 在專案根目錄下,建立 deploy pro...

vue cli 3 x 搭建專案

一 安裝 vue cli 更新到 3.x 之後，vue cli 的包名從vue cli改成了 vue cli 如果之前全域性安裝了舊版本的vue cli 1.x 或 2.x 首先需要使用以下命令解除安裝掉 npm uninstall vue cli g or yarn global remove v...

vue cli2 x與vue cli3 x的搭建

vue cli2.x與vue cli3.x的搭建 搭建前提條件 一 node環境 這裡不詳細介紹 二 安裝webpack 執行npm install webpack g 三 安裝vue cli 2.x npm install vue cli g 建立專案 vue init webpack 專案名 不...