Laravel Vite中Hot Module Reload失效问题排查求助

问题 #

Laravel项目中使用Vite时，修改代码后浏览器无法显示更新，刷新页面也无效，必须退出并重启npm run dev进程才会生效。

相关代码 #

File.php #

<!DOCTYPE html><html ng-app="app">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title><?= Config::get('app.name') ?></title>
    <link rel="shortcut icon" type="image/png" href="<?= "fcontract-favicon.png" . '?v=' . Config::get('app.version') ?>">

    <!-- build:css(.) assets/css/vendor.css -->
    <link rel="stylesheet" href="bower_components/PACE/themes/blue/pace-theme-minimal.css" />
    <link rel="stylesheet" href="bower_components/perfect-scrollbar/css/perfect-scrollbar.min.css" />
    <!-- endbuild -->

    <!-- lazyload Start -->
    <link id="lazyload-holder">
    <!-- lazyload End -->

    <!-- build:css({.tmp,app}) assets/css/style.css -->
    <link href="vcontract/assets/styles/tabler.css" rel="stylesheet">
    <link href="vcontract/assets/styles/CssCustomize.css" rel="stylesheet">
    <link href="vcontract/assets/styles/fa.css" rel="stylesheet">
    <link href="vcontract/assets/javascript/libs/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="vcontract/assets/javascript/libs/alertify/css/alertify.css" rel="stylesheet">
    <link href="vcontract/assets/javascript/libs/alertify/css/default.min.css" rel="stylesheet">
    <link href="vcontract/assets/javascript/libs/flatpickr/flatpickr.min.css" rel="stylesheet">
    <!-- endbuild -->
    <?php
    $viteAsset = \Illuminate\Support\Facades\Vite::asset('resources/js/app.js');
    ?>
    <script type="module" src="<?= $viteAsset ?>"></script>

</head>

<body ng-controller="AppCtrl as ctrl" ng-class="{'border-top-wide border-primary d-flex flex-column':$state.includes('others.signin'), 'login-bg': themeConfig.isLoginBg}">
    <!-- Main view  -->
    <div id="app" ng-class="{'flex-fill d-flex flex-column justify-content-center py-4':$state.includes('others.signin')}">
        <h1>d</h1>
        <ui-view>
    </div>

    <!-- build:js(.) scripts/vendor.js -->
    <script src="bower_components/PACE/pace.min.js"></script>
    <script src="vcontract/assets/javascript/libs/jquery/jquery.min.js"></script>
    <script src="vcontract/assets/javascript/libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/popper.js/dist/umd/popper.min.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/oclazyload/dist/ocLazyLoad.js"></script>
    <script src="bower_components/ui-jq/jq.js"></script>
    <script src="bower_components/perfect-scrollbar/js/perfect-scrollbar.jquery.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-deep-blur/angular-deep-blur.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
    <script src="bower_components/angular-translate/angular-translate.min.js"></script>
    <script src="bower_components/angular-translate/angular-translate-loader-static-files.min.js"></script>
    <script src="vcontract/assets/javascript/libs/bootstrap-notify/bootstrap-notify.js"></script>
    <script src="vcontract/assets/javascript/libs/alertify/alertify.min.js"></script>
    <script src="vcontract/assets/javascript/libs/flatpickr/flatpickr.min.js"></script>
    <script src="vcontract/assets/javascript/libs/flatpickr/ng-flatpickr.min.js"></script>
    <script src="vcontract/assets/lib/moment.js"></script>
    <script src="bower_components/signaturepad/signature_pad.js"></script>

    <!-- build:js({.tmp,app}) scripts/app.min.js -->
    <!-- Angular App Script -->

    <script src="<?php $path = "vcontract/scripts/utils.js";  echo $path . '?v=' . Config::get('app.version'); ?>"></script>
    <script src="<?php $path = "vcontract/scripts/notificationService.js";  echo $path . '?v=' . Config::get('app.version'); ?>"></script>
    <script src="<?php $path = "vcontract/scripts/app.js";  echo $path . '?v=' . Config::get('app.version'); ?>"></script>
    <script src="<?php $path = "vcontract/scripts/app.ctrl.js";  echo $path . '?v=' . Config::get('app.version'); ?>"></script>
    <script src="<?php $path = "vcontract/scripts/router.config.js";  echo $path . '?v=' . Config::get('app.version'); ?>"></script>
    <script src="<?php $path = "vcontract/scripts/services/authService.js";  echo $path . '?v=' . Config::get('app.version'); ?>"></script>
    <!-- endbuild -->

    <script>
        angular.module("app").constant('CSRF_TOKEN', '<?php echo csrf_token(); ?>');
        var version_file = "<?= Config::get('app.version') ?>";
        var footerUrl = "<?= Config::get('app.footerUrl') ?>";
    </script>
</body>

vite.config.js #

import laravel from 'laravel-vite-plugin'
import {defineConfig} from 'vite'

export default defineConfig({
plugins: [
    laravel({
            input: [
                // 'resources/sass/app.scss',
                'resources/js/app.js',
            ],
        output: 'public/dist',
        refresh: true,
    }),
],
server: {
    host: 'localhost',
    watch: {
        usePolling: true,
    },
},
resolve: {
    alias:{
        "@": "/resources"
    }
}});

配置分析与解决思路 #

当前server配置是否正确？ #

server部分的配置本身没有错误：host: 'localhost'指定了开发服务器的访问地址，watch.usePolling: true用于解决部分文件系统（如WSL、Docker容器）下Vite无法监听文件变化的问题，这个配置是合理的，但你的问题大概率不在这里。

解决步骤 #

• 扩大Vite的刷新监听范围：laravel-vite-plugin默认只监听resources目录和视图文件，你的项目中大量脚本和样式存放在vcontract目录下，需要将其加入refresh配置：

  laravel({
    input: ['resources/js/app.js'],
    output: 'public/dist',
    refresh: ['resources/**', 'vcontract/**', 'resources/views/**'],
  }),
  

• 接管未被Vite管理的静态资源：页面中直接通过<script>引入的vcontract下的JS文件，没有被Vite纳入构建流程，Vite无法监听这些文件的变化。建议将这些脚本通过import语句整合到resources/js/app.js中，或者将它们添加到Vite的input数组里，统一由Vite处理。
• 禁用浏览器缓存：开发时浏览器可能会缓存静态资源，打开浏览器开发者工具的Network面板，勾选「Disable cache」选项，或者使用Ctrl+F5强制刷新页面。
• 检查WebSocket连接状态：打开浏览器控制台，查看是否有[vite] connected.的日志，如果没有说明热更新连接失败。可以尝试修改server配置：

  server: {
    host: '0.0.0.0',
    port: 5173,
    watch: {
      usePolling: true,
    },
  },
  

• 清除Laravel视图缓存：运行php artisan view:clear清除视图缓存，确保修改后的视图能被正确加载。
• 确认文件路径一致性：检查Vite配置中的路径别名、文件路径是否存在大小写错误（Linux环境下路径区分大小写），确保Vite能正确找到目标文件。

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