快捷導(dǎo)航

vue項(xiàng)目頁(yè)面刷新后報(bào)404的解決方法

更新時(shí)間：2025年12月07日 09:29:36 作者：悟能不能悟

vue項(xiàng)目頁(yè)面正常訪問,但是刷新后報(bào)404,這種情況通常是由于前端路由? 和瀏覽器直接訪問? 的差異導(dǎo)致的,主要有以下幾個(gè)原因和解決方案,下面我們就來(lái)詳細(xì)介紹一下吧

主要原因

1. 路由模式問題（History vs Hash）

// 如果使用 history 模式，需要服務(wù)器配置
const router = new VueRouter({
  mode: 'history', // 需要服務(wù)器支持
  // mode: 'hash',  // 直接訪問不會(huì)有問題，但URL有#號(hào)
  routes: [...]
})

2. 服務(wù)器配置問題

當(dāng)直接輸入U(xiǎn)RL時(shí)，瀏覽器會(huì)向服務(wù)器請(qǐng)求該路徑，如果服務(wù)器沒有正確配置，會(huì)返回404。

解決方案

方案1：配置服務(wù)器重定向

Nginx 配置：

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

Apache 配置（.htaccess）：

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

方案2：使用 Hash 模式

const router = new VueRouter({
  mode: 'hash', // URL會(huì)包含 #/path
  routes: [...]
})

方案3：開發(fā)環(huán)境配置（webpack-dev-server）

在 vue.config.js中：

module.exports = {
  devServer: {
    historyApiFallback: true,
    // 或者更詳細(xì)的配置
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: '/index.html' }
      ]
    }
  }
}

檢查步驟

確認(rèn)當(dāng)前路由模式：

console.log(router.mode) // 查看是 history 還是 hash

檢查路由配置：

// 確保路由正確定義
const routes = [
  {
    path: '/your-path', // 你訪問的路徑
    component: YourComponent,
    name: 'YourRoute'
  }
]

驗(yàn)證路由跳轉(zhuǎn)：

<template>
  <!-- 這兩種方式應(yīng)該都能工作 -->
  <router-link to="/your-path">跳轉(zhuǎn)</router-link>
  <button @click="$router.push('/your-path')">編程式導(dǎo)航</button>
</template>

實(shí)際示例

假設(shè)你的路由配置：

// router.js
const routes = [
  {
    path: '/user/:id',
    component: UserProfile,
    name: 'user'
  }
]

直接訪問問題：

? 直接輸入：http://yoursite.com/user/123（可能404）
? 通過(guò) <router-link to="/user/123">訪問（正常）

解決方案：

// vue.config.js
module.exports = {
  devServer: {
    historyApiFallback: true
  },
  // 生產(chǎn)環(huán)境構(gòu)建路徑
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'
}