在部署vue、react的前端項目時，經常會出現404的問題，一般是文件不是真正的存在，所以Nginx報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問題}

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

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部