react如何设置basepath

设置 React 应用的 Base Path

在 React 中设置 base path 通常用于部署应用时指定子目录路径。以下是几种常见场景的配置方法：

使用 Create React App (CRA)

对于通过 create-react-app 创建的项目，可以在 package.json 中添加 homepage 字段：

{
  "homepage": "/your-base-path"
}

这会自动影响构建后的静态资源路径。

配置 React Router

如果使用 React Router v6，可以通过 basename 属性设置：

<BrowserRouter basename="/your-base-path">
  <App />
</BrowserRouter>

对于 React Router v5 及以下版本：

<Router basename="/your-base-path">
  {/* 路由配置 */}
</Router>

Webpack 开发环境配置

在 webpack.config.js 中设置 publicPath：

output: {
  publicPath: '/your-base-path/'
}

生产环境部署

当使用 Nginx 等服务器部署时，需要配置重写规则：

location /your-base-path {
  try_files $uri /your-base-path/index.html;
}

环境变量配置

可以通过 .env 文件动态设置：

PUBLIC_URL=/your-base-path

注意事项

• 确保所有资源路径使用相对路径或基于 PUBLIC_URL 的路径
• 测试时访问地址应为 http://localhost:3000/your-base-path
• 构建前清除旧构建文件避免缓存问题