如何在 PhpStorm 中使用 Vite 启用 Laravel 页面自动刷新？

Question

更新：最新更新 PhpStorm 到 PhpStorm 2023.2.1 这个错误消失了

我正在 Laravel 中使用 PhpStorm 使用 Vite 和 Tailwind CSS 开发一个

home.blade.php

页面，我遇到了一个问题，即当我进行更改时页面不会自动刷新。与我使用 Visual Studio Code 时不同，实时更新可以无缝工作。

我使用

npm run dev

启动Vite，页面确实刷新，但只有在我手动点击它之后。有没有办法配置 PhpStorm 或我的开发环境来实现自动实时更新，这样我在使用外部显示器时无需单击浏览器窗口就可以看到更改？

我正在使用 Laravel 10、具有新界面的 PhpStorm 2023.2、MacBook Air M1、不同版本的 node.js（从 14 到 20）

这是我的

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/**',
            ],
        }),
    ],
});

Answer 1

我发现热重载可以在默认的Vite配置下使用，但是你需要使用Cmd+S手动保存文件或者等待一些空闲时间。还有一个选项可以在指定的空闲时间后自动保存文件，但它似乎工作不正常。例如，我将其设置为 1 秒，但最终我等待了 10 多秒才能自动保存文件。

问题似乎出在 PhpStorm 中计算空闲时间。