Vite MPA应用刷新时Vue Router返回404的解决方法

问题核心是：MPA模式下每个模块对应独立的入口HTML，当你刷新/mgmt/room/details这类前端路由路径时，服务器会直接去查找该路径的物理文件，但实际不存在，所以返回404。下面分开发和生产环境给出解决办法：

开发环境（Vite Dev Server） #

修改vite.config.js，给dev server配置路由 fallback，让所有/mgmt/开头的请求都指向/mgmt/index.html，/user/开头的指向/user/index.html：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  server: {
    historyApiFallback: {
      rewrites: [
        { from: /^\/mgmt\/.*$/, to: '/mgmt/index.html' },
        { from: /^\/user\/.*$/, to: '/user/index.html' },
        { from: /^\/$/, to: '/index.html' }
      ]
    }
  },
  build: {
    rollupOptions: {
      input: {
        mgmt: resolve(__dirname, './mgmt/index.html'),
        user: resolve(__dirname, './user/index.html'),
        login: resolve(__dirname, './index.html')
      }
    }
  },
  appType: 'mpa'
})

生产环境 #

根据你部署的服务器类型配置重定向规则，核心是把对应模块的前端路由请求转发到该模块的入口HTML：

Nginx配置 #

在你的Nginx站点配置中添加：

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

  # 管理模块路由转发
  location /mgmt/ {
    try_files $uri $uri/ /mgmt/index.html;
  }

  # 用户模块路由转发
  location /user/ {
    try_files $uri $uri/ /user/index.html;
  }

  # 登录页根路径
  location / {
    try_files $uri $uri/ /index.html;
  }
}

Apache配置 #

在项目根目录的.htaccess文件中添加：

<IfModule mod_rewrite.c>
  RewriteEngine On

  # 管理模块
  RewriteRule ^mgmt/(.*)$ /mgmt/index.html [L]

  # 用户模块
  RewriteRule ^user/(.*)$ /user/index.html [L]

  # 登录页
  RewriteRule ^$ /index.html [L]
</IfModule>

Node.js Express服务器配置 #

如果用Express部署，添加中间件：

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

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

// 管理模块路由 fallback
app.get('/mgmt/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'mgmt', 'index.html'));
});

// 用户模块路由 fallback
app.get('/user/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'user', 'index.html'));
});

// 登录页
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

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

注意事项 #

• 确保Vue Router的createWebHistory的base参数和模块路径一致，你当前配置的createWebHistory('/mgmt')是正确的，无需修改。
• 生产环境部署时，要确认dist目录下的文件结构正确，Vite打包后会生成mgmt/、user/和根目录的index.html。

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