Laravel双Vite Dev Server与@vite Blade指令端口冲突解决方案问询

1. 分离Vite热更新标记文件 #

默认Vite会在public/hot写入当前开发服务器地址，两个服务同时运行时会互相覆盖。我们需要让每个Vite配置生成独立的hot文件：

• 编辑vite/app.config.js，添加server.hotFile配置：

export default defineConfig({
  server: {
    port: 3000,
    hotFile: 'public/hot.app' // 指定应用端独立hot文件
  },
  // 其他原有配置...
})

• 编辑vite/admin.config.js，同理修改：

export default defineConfig({
  server: {
    port: 3001,
    hotFile: 'public/hot.admin' // 指定管理端独立hot文件
  },
  // 其他原有配置...
})

2. 自定义Blade指令加载对应资源 #

Laravel的@vite指令默认读取public/hot，我们需要创建自定义指令来分别读取各自的hot文件，并加载对应Vite配置的资源。

在app/Providers/AppServiceProvider.php的boot方法中添加自定义指令：

use Illuminate\Support\Facades\Blade;
use Illuminate\Support\Facades\File;

public function boot()
{
    // 应用端Vite指令
    Blade::directive('viteApp', function ($arguments) {
        $hotFile = public_path('hot.app');
        if (File::exists($hotFile)) {
            $url = rtrim(File::get($hotFile), PHP_EOL);
            return "<script type='module' src='{$url}/@vite/client'></script>
                   <script type='module' src='{$url}/resources/js/app.js'></script>";
        }

        return Blade::compileString("@vite('resources/js/app.js')");
    });

    // 管理端Vite指令
    Blade::directive('viteAdmin', function ($arguments) {
        $hotFile = public_path('hot.admin');
        if (File::exists($hotFile)) {
            $url = rtrim(File::get($hotFile), PHP_EOL);
            return "<script type='module' src='{$url}/@vite/client'></script>
                   <script type='module' src='{$url}/resources/js/admin.js'></script>";
        }

        return Blade::compileString("@vite('resources/js/admin.js')");
    });
}

3. 在Blade模板中使用自定义指令 #

• 应用端模板（如resources/views/app.blade.php）替换原@vite为@viteApp
• 管理端模板（如resources/views/admin.blade.php）替换为@viteAdmin

关于方案合理性的说明 #

你的方案完全可行——为前端和管理端分别集成Inertia，能实现完全独立的前端生态，避免代码耦合。如果后续两端的技术栈、依赖或交互逻辑差异较大，这种分离方式会更易维护。当然如果两端差异不大，共享部分前端代码也是可选优化方向，但目前的方案没问题，可继续推进。

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