React/Vite使用createBrowserRouter部署子目录时无末尾斜杠失效

核心问题原因 #

访问https://example.com/my/app（无末尾斜杠）时，浏览器会将当前路径的父级/my/作为相对资源路径的基准。而Vite配置base: './'时，资源会被解析为/my/xxx.js，但实际资源存放路径是/my/app/xxx.js，因此触发404错误。

可选修复方案 #

1. Vite动态配置base（推荐，无需硬编码） #

不要固定设置base: './'，而是通过环境变量或构建命令动态传入部署路径，适配不同环境：

• 通过环境变量配置：
  在vite.config.js中读取环境变量：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    base: process.env.BUILD_BASE || './',
  });
  

  部署时根据环境设置对应的环境变量，比如生产环境执行：

  BUILD_BASE=/my/app/ vite build
  

• 直接通过构建命令传入：
  无需修改配置文件，构建时直接指定base：

  vite build --base=/my/app/
  

  两种方式都能让Vite打包时自动将资源路径前缀设为正确的子目录路径，无论访问URL是否带末尾斜杠，资源都能正常加载。

2. 服务器端重定向（兜底方案） #

如果无法动态配置Vite的base，可在Express服务器中添加重定向规则，将无末尾斜杠的请求跳转至带斜杠的地址：

• 针对特定子目录的重定向：

  app.get('/my/app', (req, res) => {
    res.redirect(301, '/my/app/');
  });
  

• 通用型重定向（匹配所有非根目录且无末尾斜杠的HTML请求）：

  app.use((req, res, next) => {
    if (!req.path.endsWith('/') && req.path !== '/' && req.get('accept')?.includes('text/html')) {
      res.redirect(301, `${req.path}/`);
    } else {
      next();
    }
  });
  

  301永久重定向可确保URL统一，同时避免重复触发路径解析错误。

为什么base设为.或空字符串无效？ #

• base: '.'和base: './'逻辑一致，都是相对当前页面路径解析资源，无末尾斜杠时基准路径仍为父级目录，无法解决问题。
• 空字符串等价于/，会将资源路径指向网站根目录，完全不符合子目录部署的需求。

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