前言

Vue.js相較于傳統(tǒng)的HTML三件套（HTML、CSS、JavaScript）有許多優(yōu)點(diǎn)。其中最重要的一點(diǎn)是，Vue.js提供了響應(yīng)式數(shù)據(jù)綁定的能力，這意味著當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，視圖會(huì)自動(dòng)更新，無(wú)需手動(dòng)操作DOM。此外，Vue.js采用組件化開(kāi)發(fā)的方式，允許將一個(gè)頁(yè)面拆分成多個(gè)可復(fù)用的組件，從而提高了代碼的可維護(hù)性和可重用性。Vue.js還提供了許多方便的工具和插件，例如路由管理、狀態(tài)管理、打包工具等，使得開(kāi)發(fā)效率更高。Vue.js是一款功能強(qiáng)大、易于學(xué)習(xí)、易于使用的前端框架，已經(jīng)成為了許多開(kāi)發(fā)者的首選之一。

今天我們來(lái)學(xué)習(xí)如何將Vue前端項(xiàng)目部署到服務(wù)器。

所需軟/硬件

本文教程使用騰訊云服務(wù)，以Centos7系統(tǒng)為例，使用寶塔面板進(jìn)行管理。

教程

1.配置服務(wù)器

1.1購(gòu)買服務(wù)器

最近騰訊云新上架了一批輕量應(yīng)用服務(wù)器，為您提供多款型號(hào)選擇，以實(shí)惠的價(jià)格為您提供穩(wěn)定、高效的運(yùn)行環(huán)境，本文我們選用33元/月的配置來(lái)完成教程。

1.2添加防火墻規(guī)則

添加防火墻規(guī)則以開(kāi)放端口，我這里為了方便一次性開(kāi)放了所有端口，各位可以根據(jù)實(shí)際情況進(jìn)行選擇。

2.配置服務(wù)器運(yùn)行環(huán)境

2.1安裝寶塔面板并完成環(huán)境配置

我們前往寶塔面板官方下載頁(yè)面，根據(jù)系統(tǒng)類型選擇對(duì)應(yīng)安裝腳本進(jìn)行安裝，我們這里選擇Centos安裝腳本

安裝完成后首先安裝服務(wù)器套件，本文使用Nginx1.22、Mysql5.7，各位可以根據(jù)實(shí)際需求選擇安裝：

安裝完基本運(yùn)行環(huán)境后我們還需要來(lái)到Node項(xiàng)目界面，打開(kāi)版本管理器安裝Node.js，這里我們需要注意，從V17開(kāi)始node改變了安全策略，可能導(dǎo)致部分用戶的代碼無(wú)法構(gòu)造，本教程以V16.19.1為例：

3.? 部署項(xiàng)目

3.1上傳并配置Vue項(xiàng)目

接下來(lái)我們上傳Vue項(xiàng)目到服務(wù)器上并完成基本配置后點(diǎn)擊保存即可，其中啟動(dòng)選項(xiàng)我們選擇了npm run serve來(lái)完成對(duì)項(xiàng)目的測(cè)試：

此時(shí)項(xiàng)目將會(huì)進(jìn)入動(dòng)態(tài)編譯模式，優(yōu)點(diǎn)是當(dāng)我們完成對(duì)代碼的修改后可以即時(shí)自動(dòng)生效，以便測(cè)試，但這樣的缺點(diǎn)是運(yùn)行效率較低，服務(wù)器負(fù)載較高，當(dāng)我們調(diào)試完畢后可以使用npm run build命令來(lái)打包項(xiàng)目成靜態(tài)文件：

3.2部署打包后的項(xiàng)目

打包完成后我們即可像普通網(wǎng)頁(yè)項(xiàng)目一樣部署,使用騰訊云DNS綁定域名后即可訪問(wèn)：

3.3配置偽靜態(tài)

最重要的一點(diǎn)來(lái)了，由于我的項(xiàng)目采用的History模式而非Hash，由于History模式下我們沒(méi)有配置好路由，導(dǎo)致web服務(wù)器找不到我們的入口，直接部署完前端靜態(tài)文件后會(huì)使直接訪問(wèn)url時(shí)404報(bào)錯(cuò)，這是我們需要在Nginx的偽靜態(tài)中新增重寫規(guī)則來(lái)完成路由指向：

4.部署完成

最后我們就可以愉快地訪問(wèn)自己的項(xiàng)目啦：

總結(jié)

在本教程中，我們一起學(xué)習(xí)了從購(gòu)買服務(wù)器、配置服務(wù)器和項(xiàng)目到最終成功上線項(xiàng)目，作者不得不感嘆隨著時(shí)代的發(fā)展，前端框架已經(jīng)產(chǎn)生了質(zhì)的飛躍，如今前后端分離可以大幅減輕服務(wù)器壓力，而基于MVVM模型的Vue框架也使得我們的開(kāi)發(fā)效率更高，開(kāi)發(fā)人員可以更加專注數(shù)據(jù)的獲取和展示，減小開(kāi)發(fā)成本和壓力。