Vue3+Webpack5项目刷新页面出现路由404问题求助

问题根源 #

这是Vue Router history模式的典型问题：单页应用（SPA）里，前端路由跳转靠JS修改浏览器历史记录实现，不会向服务器发请求；但刷新页面时，浏览器会直接请求当前URL（比如/home），而服务器上没有对应物理文件，因此返回404错误。

解决方案 #

1. 确认Vue Router模式 #

先检查路由配置，确认使用的是history模式（hash模式不会出现此问题）：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(), // 此处为history模式
  routes: [
    // 你的路由规则
  ]
})

2. 开发环境（Webpack Dev Server）配置 #

在Webpack配置文件中，给devServer添加historyApiFallback配置，让Dev Server将所有请求重定向到index.html：

// webpack.config.js
module.exports = {
  // 其他配置项...
  devServer: {
    historyApiFallback: true, // 核心配置
    open: true,
    port: 8080
    // 其他devServer配置...
  }
}

修改后重启Webpack Dev Server，刷新页面即可正常加载路由页面。

3. 生产环境服务器配置 #

生产部署时，需根据所用服务器配置 fallback规则，以下是常见服务器的配置方式：

Nginx配置

修改站点配置文件，添加try_files指令：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/dist;

  location / {
    try_files $uri $uri/ /index.html; // 所有请求指向index.html
  }
}

Apache配置

在dist目录下创建.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>

Node.js Express服务器配置

使用connect-history-api-fallback中间件处理路由：

const express = require('express')
const history = require('connect-history-api-fallback')
const app = express()

app.use(history()) // 需放在静态资源配置之前
app.use(express.static('dist'))

app.listen(3000, () => {
  console.log('Server running on port 3000')
})

验证修改 #

• 开发环境：重启Webpack Dev Server，刷新页面确认路由正常加载。
• 生产环境：部署配置后的服务器，访问路由页面并刷新，确认不再出现404错误。

内容的提问来源于stack exchange，提问作者amir tbi