Nginx部署Vue解決頁面404報錯

一、打包項目

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 / { root ... index ... try_files $uri $uri/ /index.html; ---解決頁面重新整理404問題}

1. 儲存退出

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