Nginx部署Vue專案以及解決重新整理頁面404問題

2022-09-14 17:06:10 字數 1846 閱讀 7582

一、打包專案 

1.在專案中的package.json上右鍵,點選show npm scripts

2.打包(或者直接在專案根目錄執行 npm run build 命令)

3.成功後會在專案根目錄生成dist資料夾

二、壓縮並上傳專案到伺服器(我這裡是使用securecrt工具進行上傳和部署專案的) 

securecrt版本資訊如下:

1.壓縮檔案

2.上傳檔案

2.1 輸入命令rz -y上傳(我這裡是上傳到root目錄下的)

若沒有上傳資訊,可再次輸入rz命令完成上傳

三、解壓此檔案到nginx/html/目錄下

四、複製dist目錄到nginx的html目錄中

到此vue專案就全部部署到nginx伺服器中啦!

五、解決專案部署到nginx伺服器中重新整理頁面404的問題

1. 進入nginx配置檔案目錄

cd nginx/conf/
2.編輯配置檔案nginx.conf

vi nginx.conf

輸入命令 i 進入編輯模式,在指定位置新增**

location /

3. 儲存退出

i --編輯

esc然後

:w --儲存

:quit --退出

常用命令:

1. rz                -- 上傳檔案

2. rz -y -- 上傳檔案(存在同名檔案則覆蓋)

3. unzip -- 解壓檔案(例:unzip dist.zip)

4. rm -f -- 刪除檔案不存在不提示資訊

5. rm -rf -- 刪除目錄及目錄下的檔案

6. rm -- 刪除檔案,不能刪除目錄,刪除的檔案可恢復

7. ./nginx -t -- 驗證nginx配置檔案是否正確

8. ./nginx -s reload -- 重啟nginx

Nginx部署Vue專案

npm run build生成乙個dist資料夾。將dist目錄整個複製到nginx根目錄的html資料夾下。編輯conf目錄下的nginx.conf檔案 server 因為路由的路徑資源並不是乙個真實的路徑,所以無法找到具體的檔案 因此需要rewrite到index.html,然後交給路由再處理資...

nginx部署vue專案

nginx是乙個高效能的http和反向 伺服器。因此常用來做靜態資源伺服器和後端的反向 伺服器。本文主要記錄使用nginx去部署使用vue搭建的前端專案,專案基於vue官方的腳手架vue cli構建。打包vue專案 通過npm run build命令打包好的靜態資源將輸出到dist目錄中。1.win...

nginx部署vue專案

nginx是乙個高效能的http和反向 伺服器。因此常用來做靜態資源伺服器和後端的反向 伺服器。本文主要記錄使用nginx去部署使用vue搭建的前端專案,專案基於vue官方的腳手架vue cli構建。npm run build通過上面命令後打包好的靜態資源將輸出到dist目錄中。如圖所示 安裝ngi...