如何用Laravel Herd实现多项目共享单数据库并支持SPA热重载

完全可以通过Herd+DBngin+TablePlus的组合实现你的需求，以下是具体操作步骤：

1. 配置共享单数据库 #

• 打开DBngin，创建一个单实例数据库（比如MySQL 8.0），记录好数据库名、用户名、密码和默认端口（通常是3306）。
• 分别修改两个Laravel项目的.env文件，同步数据库配置：

  DB_CONNECTION=mysql
  DB_HOST=127.0.0.1
  DB_PORT=3306
  DB_DATABASE=your_shared_db_name
  DB_USERNAME=your_db_user
  DB_PASSWORD=your_db_password
  

• 避免表名冲突：可以给其中一个项目的数据库表添加前缀，在config/database.php的mysql配置项里添加'prefix' => 'admin_'；也可以提前统一规划表名，比如SPA项目表用customer_前缀，后台表用admin_前缀。

2. 用Herd配置独立URL访问 #

• 将两个Laravel项目放到Herd的默认目录（~/Herd），或者在Herd的「Projects」页面点击「Add Project」添加自定义项目目录。
• Herd会自动为每个项目分配一个.test域名（比如customer-portal.test对应SPA项目，admin-panel.test对应Blade后台），直接在浏览器访问这些域名就能打开对应项目。
• 如需自定义域名，在Herd里找到对应项目，点击域名编辑框修改即可。

3. 配置SPA项目的热重载 #

• 确保SPA项目的Vite配置正确，修改vite.config.js的server部分：

  export default defineConfig({
    plugins: [
      laravel({
        input: 'resources/js/app.jsx',
        refresh: true,
      }),
      react(),
    ],
    server: {
      host: true,
      port: 5173, // 自定义端口避免冲突
      hmr: true,
      origin: 'http://customer-portal.test:5173', // 对应Herd分配的SPA域名
    },
  });
  

• 运行npm run dev启动Vite开发服务器，此时访问http://customer-portal.test，修改React/JSX文件后页面会自动热重载。
• 若遇到跨域问题，修改config/cors.php，将paths设为['*']，allowed_origins添加你的.test域名。

注意事项 #

• 修改.env后，执行php artisan config:clear清除配置缓存，确保数据库配置生效。
• 迁移文件管理：如果两个项目有共享表，建议在一个项目中维护迁移文件，另一个项目直接使用；若需各自维护表，务必确保表名不重复。
• TablePlus连接：直接使用DBngin中的数据库信息创建连接，即可同时管理两个项目的数据库数据。

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