first
小李世界
4年前
修改理由：
此投稿已在 4年前 合并。
内容修改：
| Old | New | Differences |
|---|---|---|
| 1 | [BrowserSync](https://browsersync.io/) 可以自动监控你的文件变化，并将更改注入浏览器，而无需手动刷新。你可以通过调用 `mix.browserSync()` 方法来启用这个功能的支持： | |
| 2 | ||
| 3 | ## 配置 | |
| 4 | 打开 `tailwind.config.js`，添加以下： | |
| 5 | ``` | |
| 6 | mix.browserSync('my-domain.dev'); | |
| 7 | ||
| 8 | // 或者... | |
| 9 | ||
| 10 | // https://browsersync.io/docs/options | |
| 11 | mix.browserSync({ | |
| 12 | proxy: 'my-domain.dev' | |
| 13 | }); | |
| 14 | ||
| 15 | // 如果，您使用 `php artisan serve` 来测试的话，那么 `my-domain.dev` 改为 `127.0.0.1:8000` | |
| 16 | ``` | |
| 17 | ||
| 18 | ## 运行 MIX | |
| 19 | 你可以将字符串 (代理) 或者对象 (BrowserSync 设置) 传给这个方法。再使用 `npm run watch` 命令来开启 Webpack 的开发服务器。现在，当你修改脚本或者 PHP 文件时，浏览器会即时刷新页面以响应你的更改。 | |
| 20 | ||
| 21 | 当你运行 `npm run watchd`，会提示 `npm install browser-sync browser-sync-webpack-plugin@2.0.1 --save-dev --production=false`，接着，系统自动帮您安装好，您只要重新运行 `npm run watchd` 即可。 | |
| 22 | ||
| 23 | 运行的结果例子： | |
| 24 | ``` | |
| 25 | DONE Compiled successfully in 6443ms 2:00:58 PM | |
| 26 | Asset Size Chunks Chunk Names | |
| 27 | /css/app.css 582 KiB /js/app [emitted] /js/app | |
| 28 | /js/app.js 9.17 MiB /js/app [emitted] /js/app | |
| 29 | [Browsersync] Proxying: http://127.0.0.1:8000 | |
| 30 | [Browsersync] Access URLs: | |
| 31 | ------------------------------------ | |
| 32 | Local: http://localhost:3000 | |
| 33 | External: http://192.168.1.3:3000 | |
| 34 | ------------------------------------ | |
| 35 | UI: http://localhost:3001 | |
| 36 | UI External: http://localhost:3001 | |
| 37 | ------------------------------------ | |
| 38 | [Browsersync] Watching files... | |
| 39 | ``` | |
| 40 | ||
| 41 | 它也会自动在浏览器中打开 `http://localhost:3000` | |
| 42 | ||
| 43 | > 如果您想查看数据，可以访问 `http://localhost:3001` | |
| 44 | ||
| 1 | 45 |
关于 LearnKu
粤公网安备 44030502004330号