vue打包刷新報(bào)錯的解決辦法：1、將vue router的“mode”改成“hash”；2、修改Nginx為“l(fā)ocation / {root …index …try_files $uri $uri/ /index.html;}”；3、修改Apache為“RewriteRule . /index.html [L]”并保存即可。

本教程操作環(huán)境：Windows10系統(tǒng)、Vue 3版、Dell G3電腦。

vue打包刷新報(bào)錯怎么辦？

vue項(xiàng)目部署后刷新報(bào)404 解決方法

一、原因

因之前vue搭建的項(xiàng)目的vue router mode 使用的默認(rèn)模式hash,項(xiàng)目打包部署后刷新頁面不會出現(xiàn)404這種情況

但是因項(xiàng)目需求把vue router 的mode改成了history,結(jié)果跳轉(zhuǎn)頁面沒問題，刷新頁面的時(shí)候報(bào)404錯誤

二、解決方案：

方案一：vue router 的mode改成hash

方案二：nginx修改

location / {   root ...   index ...   try_files $uri $uri/ /index.html; ---解決頁面刷新404問題 }　

如圖：

警告：

因?yàn)檫@么做以后，你的服務(wù)器就不再返回 404 錯誤頁面，因?yàn)閷τ谒新窂蕉紩祷?index.html 文件。為了避免這種情況，你應(yīng)該在 Vue 應(yīng)用里面覆蓋所有的路由情況，然后在給出一個 404 頁面。或者，如果你是用 Node.js 作后臺，可以使用服務(wù)端的路由來匹配 URL，當(dāng)沒有匹配到路由的時(shí)候返回 404，從而實(shí)現(xiàn) fallback。

const router = new VueRouter({   mode: 'history',   routes: [     { path: '*', component: NotFoundComponent }   ] })

方案三：Apache

<IfModule mod_rewrite.c>   RewriteEngine On   RewriteBase /   RewriteRule ^index.html$ - [L]   RewriteCond %{REQUEST_FILENAME} !-f   RewriteCond %{REQUEST_FILENAME} !-d   RewriteRule . /index.html [L] </IfModule>

推薦學(xué)習(xí)：《vue.js視頻教程》