如何在PhpStorm中实现Laravel+Vite页面自动刷新？附版本修复说明

问题描述 #

• 使用Laravel 10、Vite和Tailwind CSS开发home.blade.php时，修改内容后页面无法自动触发刷新，需手动点击浏览器窗口才会更新；但在Visual Studio Code中可正常实现实时更新。
• 已通过npm run dev启动Vite服务，需求是配置环境实现无需手动操作的自动实时刷新，适配外接显示器场景。

环境信息 #

• PhpStorm 2023.2（新界面）
• MacBook Air M1
• Node.js 14~20版本

当前Vite配置（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/routes/**',
                'routes/**',
                'resources/views/**',
            ],
        }),
    ],
});

最终解决方案 #

将PhpStorm升级至2023.2.1版本后，页面自动刷新功能恢复正常。

额外排查建议（若升级后仍有问题） #

• 确认PhpStorm的文件自动同步功能已开启：前往设置 > 外观与行为 > 系统设置，勾选同步文件系统和自动同步选项。
• 检查PhpStorm的Vite插件是否正常启用：在设置 > 插件中搜索Vite，确保插件处于激活状态。
• 验证Vite的WebSocket连接：打开浏览器开发者工具的网络面板，查看是否有Vite的WebSocket连接建立，若连接失败可尝试重启npm run dev服务。
• 确认项目目录权限：避免将项目放在受系统权限限制的目录（如Mac的/Library或/System）下，确保PhpStorm可正常监听文件变更。

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