Laravel Mix：Browsersync 浏览器自动刷新

在Laravel项目中，使用Laravel Mix配合BrowserSync实现浏览器自动刷新，可以提高开发效率。以下是一个简单的配置示例：

首先，确保你已经安装了browser-sync和laravel-mix。

npm install --save-dev browser-sync@2.26.7 laravel-mix@6.0.6 cross-env

然后，在package.json中添加scripts和BrowserSync配置：

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development node_modules/laravel-mix/bin/webpack.js --watch",
    "watch": "cross-env BROWSER=none browser-sync start --server --files='**/*.php, resources/css/*.css, resources/js/*.js' --proxy='your-local-domain.test'"
  }
}

• NODE_ENV=development 设置Node环境变量，这对于Laravel Mix来说很重要。
• node_modules/laravel-mix/bin/webpack.js --watch 运行Laravel Mix的watch命令，监听文件变化。
• BROWSER=none 防止BrowserSync打开新的浏览器窗口。
• --server 启动BrowserSync的静态服务器。
• --files 指定需要监听的文件变化。
• --proxy 设置本地开发域名，当你访问这个域名时，BrowserSync会处理请求。

接下来，运行以下命令：

npm run watch

这将启动BrowserSync并监听指定的文件变化。当你在编辑器中保存文件时，BrowserSync会自动刷新浏览器，显示最新的变化。