一、打包專案
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...