vue打包刷新報錯如何解決

本篇內容主要講解“vue打包刷新報錯如何解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue打包刷新報錯如何解決”吧!

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

vue項目部署后刷新報404 解決方法

一、原因

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

但是因項目需求把vue router 的mode改成了history,結果跳轉頁面沒問題，刷新頁面的時候報404錯誤

二、解決方案：

方案一：vue router 的mode改成hash

方案二：nginx修改

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

如圖：

警告：

因為這么做以后，你的服務器就不再返回 404 錯誤頁面，因為對于所有路徑都會返回 index.html 文件。為了避免這種情況，你應該在 Vue 應用里面覆蓋所有的路由情況，然后在給出一個 404 頁面。或者，如果你是用 Node.js 作后臺，可以使用服務端的路由來匹配 URL，當沒有匹配到路由的時候返回 404，從而實現 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>

到此，相信大家對“vue打包刷新報錯如何解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！