快捷導(dǎo)航

使用寶塔面板中Nginx部署前端Vue項目完整步驟

更新時間：2024年10月21日 10:03:30 作者：魚文樂~~

在Kubernetes(K8S)部署前端Vue項目通常會涉及到使用Nginx作為靜態(tài)資源服務(wù)器的一個重要部分,這篇文章主要給大家介紹了關(guān)于使用寶塔面板中Nginx部署前端Vue項目的相關(guān)資料,需要的朋友可以參考下

我相信已經(jīng)到這一步了，Nginx和寶塔過多的描述我就不說了，直接上干貨實操。

第一步：前端項目打包

直接運行Npm run build命令進行打包，會打成一個dist的壓縮包

注意：我們前端打包的時候要修改我們連接后端接口的：ip+端口號

然后我們解壓成文件夾！
????

將我們解壓好的前端項目文件上傳到目錄/www/server/nginx/html下

1、

2、

3、

這里的端口就是我們剛剛在配置文件中設(shè)置的端口

注意：這里出來我們的寶塔面板放行以后還要在我們對應(yīng)服務(wù)器中的安全組進行放行對應(yīng)的端口

當(dāng)我們前面工作都做完了以后我們?nèi)ピL問我們IP+剛剛的端口就可以訪問了

如果有域名大家可以配置一下，這樣就直接域名加端口訪問了。

問題描述

Vue項目在寶塔面板中部署后出現(xiàn)了路由跳轉(zhuǎn)故障，并且跳轉(zhuǎn)界面中出現(xiàn)提示Nginx錯誤

解決方案

確定該項目在本地運行中確實沒路由方面問題，寶塔面板部署后才出現(xiàn)相關(guān)問題，這是因為沒有進行有關(guān)配置

進入寶塔面板地址，選擇“網(wǎng)站”，對目標(biāo)站點點擊“設(shè)置”，在“配置文件”中添加以下內(nèi)容：

location / {
    try_files $uri $uri/ /index.html;
    }

到此這篇關(guān)于使用寶塔面板中Nginx部署前端Vue項目的文章就介紹到這了,更多相關(guān)寶塔面板Nginx部署前端Vue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: