如何在Laragon开发环境中运行React应用并解决路由与后端请求问题

1 Laragon启用Apache rewrite模块 #

注：a2enmod rewrite是Linux系统下Apache的模块启用命令，Laragon为Windows集成环境，不需要执行该命令，按以下步骤操作即可

• 打开Laragon主界面，点击顶部的「菜单」按钮
• 依次选择 Apache → Apache 模块 → 找到并勾选 rewrite_module
• Laragon会自动重启Apache服务，勾选后rewrite模块即生效

2 修复SPA路由缺失/mysite前缀问题 #

React端配置 #

• 在React Router的BrowserRouter组件上增加basename属性，指定路由基础路径：

// 入口文件示例（main.jsx/index.jsx）
import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter basename="/mysite">
    <App />
  </BrowserRouter>
)

• 配置打包公共路径，确保静态资源路径正确：
  • 若使用Vite构建：在vite.config.js中新增配置项 base: '/mysite/'
  • 若使用Create React App构建：在package.json中新增字段 "homepage": "/mysite/"

Apache端配置 #

在React打包产物存放的laragon/www/mysite目录下新建.htaccess文件，写入以下规则：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /mysite/
  # 转发API请求到后端，不触发SPA路由
  RewriteRule ^api/(.*)$ api/$1 [L]
  
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /mysite/index.html [L]
</IfModule>

3 修复后端PHP请求异常问题 #

• 将所有PHP后端代码存放在laragon/www/mysite/api目录下，确保接口路径和上文中的rewrite规则匹配
• React端发起请求时，统一添加/mysite/api前缀，例如登录接口请求地址写为/mysite/api/login.php
• 可直接在浏览器访问localhost/mysite/api/xxx.php测试接口是否能正常返回，排查PHP运行环境问题

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