Laravel 9中Vite的Blade热刷新功能无法正常工作

• 确认Vite开发资源已正确加载
  打开页面源代码，检查是否存在指向Vite开发服务器的资源链接（如http://localhost:5173/resources/js/app.js）。如果显示的是编译后的静态文件路径，说明Vite开发服务器未正确连接，需确保：

  • 正在运行npm run dev启动Vite服务器
  • 访问的是Laravel开发服务器地址（如http://localhost:8000）

• 明确指定Vite监听的文件路径
  虽然配置中refresh: true理论上会监听默认路径，但显式指定视图文件可避免路径匹配问题。修改vite.config.js：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  
  export default defineConfig({
      plugins: [
          laravel({
              input: ['resources/css/app.css', 'resources/js/app.js'],
              refresh: [
                  'resources/views/**/*.blade.php',
                  'resources/css/**/*.css',
                  'resources/js/**/*.js',
              ],
          }),
      ],
  });
  

  修改后重启npm run dev

• 清除浏览器缓存
  浏览器缓存可能导致旧页面无法更新，可通过以下方式解决：

  • 强制刷新页面（Ctrl+F5 或 Cmd+Shift+R）
  • 打开开发者工具（F12），在Network选项卡勾选「Disable cache」

• 检查Vite服务器日志
  查看npm run dev的控制台输出：

  • 确认是否显示「watching for file changes...」
  • 修改welcome.blade.php后，查看是否有文件变更的日志输出
    如果无日志，可能是系统文件监听权限问题：
  • Windows WSL环境需确保项目目录在WSL文件系统内
  • macOS/Linux需确保当前用户对项目目录有读写权限

• 验证APP_URL配置
  检查.env文件中的APP_URL是否与Laravel开发服务器地址一致（如APP_URL=http://localhost:8000），Vite需要与Laravel服务器同域才能正常发送热刷新信号。

• 适配本地开发环境（Valet/Homestead等）
  若使用Valet或Homestead，需在vite.config.js中指定对应服务器地址：

  export default defineConfig({
      plugins: [laravel(...)]
      server: {
          host: 'your-site.test', // 替换为你的本地域名
          port: 5173,
      },
  });
  

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