Laravel 10.33中Vite插件无法自动刷新页面问题排查

你可以从以下几个方面排查遗漏的操作：

• 确认页面已正确引入Vite开发脚本
  在你的Blade模板中，必须通过@vite指令引入资源，比如在页面的<head>或</body>前添加：

  @vite(['resources/css/app.css', 'resources/js/app.js'])
  

  这个指令会自动注入Vite的热模块替换（HMR）脚本，没有它浏览器无法和Vite建立实时通信。

• 检查WebSocket连接是否正常
  打开浏览器控制台的「Network」标签，切换到「WS」分类，查看是否有来自localhost:5173的WebSocket连接。如果连接失败或报错，可尝试在Vite配置中明确设置server的origin：

  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: true,
          }),
      ],
      server: {
          origin: 'http://localhost:5173',
      },
  });
  

  重启npm run dev后再测试。

• 明确指定refresh监听的文件路径
  虽然refresh: true默认监听resources/views下的文件，但如果你的页面文件不在这个目录，或需要监听其他类型文件，建议手动指定路径：

  laravel({
      input: [
          'resources/css/app.css',
          'resources/js/app.js'
      ],
      refresh: [
          'resources/views/**/*.blade.php',
          'resources/js/**/*.js',
          'resources/css/**/*.css'
      ],
  }),
  

• 重启服务并清除缓存
  缓存可能导致HMR失效，先停止php artisan serve和npm run dev，执行以下操作后重启服务：

  • 清除Laravel缓存：php artisan cache:clear
  • 清除浏览器缓存（或用无痕模式打开页面）

• 更新laravel-vite-plugin到最新版本
  版本兼容性问题也可能引发该问题，运行命令更新插件：

  npm update laravel-vite-plugin
  

  更新完成后重启npm run dev。

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