Vite+React生产环境刷新页面出现404错误的解决求助

这个问题的核心原因是：React属于单页应用（SPA），前端路由由浏览器端处理，但刷新页面时，浏览器会直接向服务器请求当前路径的资源，而服务器上并没有对应路径的文件，因此返回404。开发环境下Vite内置了路由 fallback 处理，所以不会出现这个问题，生产环境需要手动配置服务器将所有路由请求转发到index.html。

以下是不同场景下的具体解决方法：

一、基础Vite配置检查 #

如果你的应用部署在子路径下（比如https://your-domain.com/my-app/），需要先在vite.config.js中配置正确的base路径：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/my-app/' // 根路径部署则设为 '/'
})

二、各服务器平台配置方案 #

1. Nginx服务器 #

修改Nginx站点配置文件，添加try_files指令，将所有请求指向index.html：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/dist; // 替换为你的dist目录绝对路径

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

配置完成后重启Nginx生效：

sudo systemctl restart nginx

2. 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>

确保Apache已开启mod_rewrite模块。

3. Netlify/Vercel等静态托管平台 #

• Netlify：在项目根目录创建_redirects文件，内容如下：

  /*    /index.html   200
  

• Vercel：在项目根目录创建vercel.json文件，配置路由重写：

  {
    "rewrites": [
      { "source": "/(.*)", "destination": "/index.html" }
    ]
  }
  

4. Node.js Express服务器 #

如果用Express托管静态资源，添加路由 fallback 处理：

const express = require('express');
const path = require('path');
const app = express();

// 托管dist目录下的静态文件
app.use(express.static(path.join(__dirname, 'dist')));

// 所有未匹配的请求都返回index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

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

内容的提问来源于stack exchange，提问作者Developer Sabbir