Laravel Mix:Browsersync 浏览器自动刷新
BrowserSync 可以自动监控你的文件变化,并将更改注入浏览器,而无需手动刷新。你可以通过调用 mix.browserSync()
方法来启用这个功能的支持:
配置
打开 webpack.mix.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
推荐文章: