如何让Laravel Mix排除监听.php文件

我完全懂你的痛点——后端改个PHP文件就触发整页重载，甚至普通Ajax请求都能触发Browsersync刷新，这实在太打断开发节奏了。别担心，调整Laravel Mix的配置就能搞定，下面是具体的解决方案：

方法1：配置Browsersync精准控制监听范围 #

Laravel Mix内置了Browsersync，你可以直接在webpack.mix.js里明确指定要监听的文件，同时排除所有后端PHP文件：

// 先引入path模块（如果需要用到路径解析的话）
const path = require('path');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .browserSync({
        proxy: 'your-local-site.test', // 替换成你的本地开发域名
        // 只监听前端资源和Blade模板（按需调整）
        files: [
            'resources/views/**/*.blade.php',
            'public/js/**/*.js',
            'public/css/**/*.css',
            'resources/js/**/*.vue'
        ],
        // 排除所有后端PHP文件目录
        exclude: [
            path.resolve(__dirname, 'app'),
            path.resolve(__dirname, 'routes'),
            path.resolve(__dirname, 'config'),
            path.resolve(__dirname, 'database'),
            path.resolve(__dirname, 'resources/lang')
        ]
    });

这个配置的核心逻辑是：

• 用files白名单明确需要触发刷新的文件（比如前端组件、样式、页面模板）
• 用exclude黑名单排除所有后端PHP代码目录，彻底切断后端修改与前端重载的关联

方法2：修复Ajax请求触发刷新的问题 #

针对Windows更新后Ajax请求也会触发刷新的情况，你可以在Browsersync配置里添加额外规则，过滤掉Ajax请求的刷新触发：

.browserSync({
    proxy: 'your-local-site.test',
    files: [/* 你的监听文件列表 */],
    exclude: [/* 你的排除列表 */],
    notify: false, // 关闭浏览器右上角的刷新通知（可选）
    ghostMode: false, // 关闭跨浏览器的同步操作（比如输入、滚动，可选）
    middleware: function (req, res, next) {
        // 识别Ajax请求，避免触发刷新
        if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
            res.setHeader('Cache-Control', 'no-cache');
        }
        next();
    }
});

方法3：直接修改Webpack的监听配置（兜底方案） #

如果Browsersync的配置没生效，你可以直接修改Webpack的watchOptions，强制排除PHP文件的监听：

mix.webpackConfig({
    watchOptions: {
        ignored: [
            /node_modules/,
            /\.php$/, // 排除所有.php后缀的文件
            path.resolve(__dirname, 'app'),
            path.resolve(__dirname, 'routes')
        ]
    }
});

验证配置 #

修改完webpack.mix.js后，重启yarn run hot，现在试试修改后端PHP文件或者发起Ajax请求，应该就不会再触发不必要的浏览器重载了。

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