寶塔面板作為一款廣受歡迎的服務器管理面板,受到了廣大開發者的青睞。而Vue.js作為一個簡潔、高效、可復用的前端框架,在Web開發中也處于領先地位。將兩者結合起來,可以實現快速部署并高效地管理Vue項目。
在開始部署之前,需要確保在服務器上已經安裝了寶塔面板,并創建好了對應的網站和數據庫。
首先,在本地機器上使用命令行進入到Vue項目的根目錄,輸入如下命令:
npm run build
該命令將啟動Vue項目的打包過程,并在項目的“dist”文件夾中生成打包好的文件。
接下來,將該文件夾中的所有文件打包為一個zip壓縮文件,命名為“vue-dist.zip”。
將該zip文件上傳至服務器的“/www”目錄下,并解壓縮,得到一個名為“dist”的文件夾。
在寶塔面板中,進入對應網站的“網站設置”頁面,進入“SSL證書”選項卡,啟用“強制HTTPS訪問”選項。
接著,進入“網站目錄”選項卡,點擊“添加目錄”,將“dist”文件夾添加進來,設置“目錄訪問”為“禁止”,防止直接訪問該文件夾。
進入“反向代理”選項卡,點擊“添加反向代理”,填寫如下信息:
目標URL:http://127.0.0.1:該網站監聽的端口號
目錄:/
保存設置后,重新啟動網站,在瀏覽器中輸入網站的域名,即可訪問到部署好的Vue項目。
注意:如果在部署過程中遇到問題,需要檢查服務器上是否安裝了Node.js、npm等必要的軟件,并確保打包好的文件已經上傳至服務器。