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

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

一、nginx伺服器檔案的配置

server 

} server 
}

在專案根目錄下, 建立 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
}

const server_list = [

, , 
]module.exports = server_list[server_id]

在專案根目錄下, 建立 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 
})

"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遠端登陸賬號1.在專案根目錄下,建立 env 檔案 當前...

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 專案名 不...