Laravel Mix:Browsersync 浏览器自动刷新 2 个改进

BrowserSync 可以自动监控你的文件变化,并将更改注入浏览器,而无需手动刷新。你可以通过调用 mix.browserSync() 方法来启用这个功能的支持:

配置

打开 tailwind.config.js,添加以下:

mix.browserSync('my-domain.dev');

// 或者...

// https://browsersync.io/docs/options
mix.browserSync({
    proxy: 'my-domain.dev'
});

// 如果,您使用 `php artisan serve` 来测试的话,那么 `my-domain.dev` 改为 `127.0.0.1:8000`

运行 MIX

你可以将字符串 (代理) 或者对象 (BrowserSync 设置) 传给这个方法。再使用 npm run watch 命令来开启 Webpack 的开发服务器。现在,当你修改脚本或者 PHP 文件时,浏览器会即时刷新页面以响应你的更改。

当你运行 npm run watch,会提示 npm install browser-sync browser-sync-webpack-plugin@2.0.1 --save-dev --production=false,接着,系统自动帮您安装好,您只要重新运行 npm run watch 即可。

运行的结果例子:

 DONE  Compiled successfully in 6443ms                                                                                                                                                                                       2:00:58 PM
                                                                                                                                                                                                          Asset      Size   Chunks             Chunk Names
/css/app.css   582 KiB  /js/app  [emitted]  /js/app
  /js/app.js  9.17 MiB  /js/app  [emitted]  /js/app
[Browsersync] Proxying: http://127.0.0.1:8000
[Browsersync] Access URLs:
 ------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.3:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 ------------------------------------
[Browsersync] Watching files...

它也会自动在浏览器中打开 http://localhost:3000

如果您想查看数据,可以访问 http://localhost:3001

本文为 Wiki 文章,邀您参与纠错、纰漏和优化
讨论数量: 2

但是为什么我的每次改动浏览器不会自动同步呢?

1个月前 评论

我发现了,我改动vue文件不会自动同步,反而是改laravel接口文件倒是自动刷新了

1个月前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!