Laravel 11+Inertia+Vue3(Vite)热重载失效问题排查

我搭建了基于Laravel 11、Inertia与Vue3（Vite）的项目，热重载功能完全失效——修改前端内容（比如<p>标签文本）后，按F5刷新页面也没用，必须停止并重启开发脚本才能看到修改效果。以下是我的配置文件：

vite.config.js #

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

app.js #

import './bootstrap';
import '../css/app.css';
import 'remixicon/fonts/remixicon.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';
import { createI18n } from 'vue-i18n';
import * as Sentry from '@sentry/vue';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        const locales = props.initialPage.props.locales;
        let locale = Object.keys(locales).includes(navigator.language) ? navigator.language : 'fr';

        if (localStorage.getItem('locale')) {
            locale = localStorage.getItem('locale');
        } else {
            localStorage.setItem('locale', locale);
        }

        const app = createApp({ render: () => h(App, props) });

        Sentry.init({
            app,
            dsn: import.meta.env.VITE_SENTRY_DSN,
            integrations: [
                Sentry.replayIntegration({
                    maskAllText: false,
                    blockAllMedia: false,
                }),
            ],
            // Session Replay
            replaysSessionSampleRate: 0.1,
            replaysOnErrorSampleRate: 1.0,
        });

        app.use(plugin)
            .use(ZiggyVue)
            .use(
                createI18n({
                    locale:
                        props.initialPage.props.auth?.user?.locale ??
                        locale ??
                        props.initialPage.props.appLocale,
                    fallbackLocale: props.initialPage.props.appLocale,
                    messages: props.initialPage.props.localeMessages,
                }),
            )
            .mount(el);

        return app;
    },
    progress: {
        color: '#4B5563',
    },
});

app.blade.php #

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        @googlefonts(['font' => 'Poppins','nonce' => csp_nonce()])

        <!-- Scripts -->
        @routes(nonce: csp_nonce())
        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
        @inertiaHead
    </head>
    <x-impersonate::banner/>
    <body class="antialiased h-lvh overflow-hidden">
        @inertia
    </body>
</html>

请问是不是我哪里配置出错了？

可能的问题与修复方案 #

1. 明确Vite热刷新监听路径
   当前refresh: true仅监听默认文件，需手动指定Inertia页面组件的路径。修改vite.config.js中laravel插件配置：

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

2. 排查CSP规则拦截热重载连接
   模板中使用了csp_nonce()，需确保Vite的WebSocket连接被允许。在config/csp.php的script-src中添加：

   'script-src' => [
       // 原有规则...
       'self',
       'http://localhost:5173',
       'ws://localhost:5173',
       'unsafe-inline', // 开发环境临时添加，生产环境需移除
   ],
   

   开发环境也可直接关闭CSP规则，避免干扰热重载。

3. 临时禁用Sentry测试
   Sentry初始化可能干扰Vite热重载流程，先注释掉Sentry相关代码，重启开发服务后测试热重载是否恢复，再逐步排查Sentry配置问题。

4. 清除缓存并重新安装依赖

   • 清除Vite缓存：npm run dev -- --clear
   • 清除Laravel缓存：php artisan config:clear && php artisan view:clear
   • 删除node_modules和package-lock.json，重新执行npm install

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