vue項目頁面刷新404錯誤的解決辦法

更新時間：2024年11月04日 10:16:34 作者：像素之間

在Vue.js項目中使用vue-router的history模式時,直接訪問或刷新頁面可能會導致404錯誤,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定參考借鑒價值,需要的朋友可以參考下

前言

在 Vue.js 項目中，如果使用了 vue-router 并且路由模式設置為 history 模式，那么在刷新頁面或直接訪問某個路由時，可能會遇到 404 錯誤。這是因為 history 模式下，前端路由的路徑并不匹配服務器上的實際路徑，導致服務器無法找到對應的資源。

解決方案

要解決這個問題，需要在服務器配置中將所有請求重定向到 index.html，讓前端的 Vue.js 應用接管路由邏輯。

1. Nginx 配置

如果你使用 Nginx 作為服務器，可以按照以下方式配置：

server {
    listen 80;
    server_name yourdomain.com;

    root /path/to/your/dist;  # 你的 Vue 項目打包后的靜態(tài)文件路徑
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

try_files $uri $uri/ /index.html;：這個指令告訴 Nginx 先嘗試請求的 URI，如果找不到，則返回 index.html，由前端路由處理。

2. Apache 配置

如果你使用 Apache 作為服務器，可以創(chuàng)建或修改 .htaccess 文件：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /

  # 如果請求的文件存在，則直接提供該文件
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d

  # 如果文件不存在，則重定向到 index.html
  RewriteRule . /index.html [L]
</IfModule>

3. 使用 hash 模式

如果你不想更改服務器配置，可以考慮使用 Vue Router 的 hash 模式。這種模式會在 URL 中添加 #，例如 example.com/#/about。這種方式不會有刷新 404 的問題，因為 # 后的內(nèi)容不會被發(fā)送到服務器。

在 router/index.js 中，將 mode 設置為 hash：

const router = new VueRouter({
  mode: 'hash',
  routes: [
    // 你的路由配置
  ]
});

總結(jié)

history 模式：需要在服務器端配置，確保所有路由都重定向到 index.html。
hash 模式：更簡單，不需要服務器端配置，但 URL 中會有 #。

根據(jù)你的項目需求和服務器環(huán)境選擇合適的解決方案。

到此這篇關于vue項目頁面刷新404錯誤的文章就介紹到這了,更多相關vue頁面刷新404內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue.js組件通信之自定義事件詳解
這篇文章主要為大家詳細介紹了Vue.js組件通信之自定義事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
Vue中el-table條件渲染防止樣式亂掉(解決方法)
這篇文章主要介紹了Vue中el-table條件渲染防止樣式亂掉問題,通過使用:key="Math.random()" 可解決樣式錯亂問題,此key屬性是vue自帶的特殊屬性,主要用在 Vue 的虛擬 DOM 算法,在新舊 nodes 對比時辨識 VNodes,依次來提升頁面渲染性能,感興趣的朋友一起看看吧
2023-11-11
5個實用的Vue技巧分享
在這篇文章中,我們將探討五個實用的?Vue?技巧,這些技巧可以使你日常使用?Vue?編程更高效、更富有成效,感興趣的小伙伴可以跟隨小編一起學習一下
2023-08-08
Vue組件教程之Toast(Vue.extend 方式)詳解
這篇文章主要給大家介紹了關于Vue組件教程之Toast(Vue.extend 方式)的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-01-01
vue 地圖可視化 maptalks 篇實例代碼詳解
這篇文章主要介紹了vue 地圖可視化 maptalks 篇，本文分步驟通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2019-05-05
vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說明
這篇文章主要介紹了vuex狀態(tài)持久化在vue和nuxt.js中的區(qū)別說明，具有很好的參考價值，希望大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue/React子組件實例暴露方法(TypeScript)
最近幾個月都在用TS開發(fā)各種項目，框架有涉及到Vue3,React18等，記錄一下Vue/React組件暴露出變量/函數(shù)的方法的寫法，對vue?react組件暴露方法相關知識感興趣的朋友跟隨小編一起看看吧
2022-11-11
手寫Vue2.0 數(shù)據(jù)劫持的示例
這篇文章主要介紹了手寫Vue2.0 數(shù)據(jù)劫持的示例，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下
2021-03-03
如何解決Element-ui的el-table固定列后出現(xiàn)的表格錯位問題
這篇文章主要介紹了如何解決Element-ui的el-table固定列后出現(xiàn)的表格錯位問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-09-09
vue項目下,如何用命令直接修復ESLint報錯
這篇文章主要介紹了vue項目下，如何用命令直接修復ESLint報錯，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04