React Router项目中Vite构建路径配置指南

在React Router项目中，当需要将应用部署到子路径时，正确配置静态资源路径至关重要。本文将详细介绍如何通过Vite配置实现这一需求。

问题背景

在基于React Router 7.5.1的项目中，开发者经常遇到静态资源路径配置问题。特别是在生产环境构建后，index.html中引用的JS/CSS资源路径没有自动包含配置的子路径前缀，导致资源加载失败。

传统解决方案的局限性

许多开发者习惯使用create-react-app(CRA)的"homepage"配置项来设置应用基础路径。然而：

1. React Router项目已不再使用CRA作为构建工具
2. Vite作为现代构建工具，不识别package.json中的"homepage"配置
3. 仅设置路由的basename无法解决资源路径问题

正确的配置方法

1. 路由基础路径配置

首先需要在react-router.config.ts中正确设置basename：

export default {
  basename: "/myapp/", // 注意结尾斜杠
  ssr: false,
} satisfies Config;

2. Vite基础路径配置

在vite.config.ts中同步配置base选项：

export default defineConfig({
  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
  base: '/myapp/' // 必须与basename保持一致
});

3. 构建验证

执行构建命令后，检查build/client/index.html文件，确认资源路径已正确包含前缀：

<link rel="modulepreload" href="/myapp/assets/manifest-xxx.js"/>

关键注意事项

1. 路径一致性：basename和base配置必须完全相同，包括结尾斜杠
2. 开发环境测试：建议在开发环境也使用相同配置，确保一致性
3. 部署环境配合：服务器配置需要正确处理带前缀的请求

进阶建议

对于更复杂的部署场景，可以考虑：

1. 使用环境变量动态设置base路径
2. 结合CI/CD流程自动注入部署路径
3. 实现多环境配置管理

通过以上配置，开发者可以确保React Router应用在各种部署环境下都能正确加载资源，提供流畅的用户体验。