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

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

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

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

4年前 评论

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

4年前 评论

@laravuel 您是用的 homestead 虚拟机吗,监控的资源是在虚拟机上,但如何将其转发到本地浏览器上?这个问题困扰好久...

3年前 评论

大家注意啦,使用browser-sync个别中文会出现小概率乱码.直接使用nginx不用browser-sync没有发现乱码问题. 环境如下: "laravel/framework": "^7.0", "browser-sync": "^2.26.7", "browser-sync-webpack-plugin": "^2.2.2",

3年前 评论

@king_
@laravuel
铛铛铛铛,答案来了.

//精简版
mix.browserSync({
    proxy: 'example-domain.test',
    open: false,
    watchOptions: {
        usePolling: true,
        interval: 500,
    },
});
// 半完整版
mix.browserSync({
    proxy: 'example-domain.test',
    open: false,
    watchOptions: {
        usePolling: true,
        interval: 500,
        ignored: /node_modules/, // 这里可不用
    },
    files: [ // 整个files数组也可以不写
        'app/**/*.php',
        'resources/views/**/*.php',
        'resources/js/app.js',
        'resources/js/components/*.vue',
        'packages/mixdinternet/frontend/src/**/*.php',
        'public/js/**/*.js',
        'public/css/**/*.css'
    ],
    notify: false, // 关闭右上角的 connected 弹窗提示
});

①, 虚拟机项目目录执行 npm run watch
②, 在本地浏览器打开 192.168.10.10:3000 即可.
如果想直接打开 example-domain.test 需要映射 8000 端口到 3000, 这样反而不好了,每次都需要 npm run watch 才能运行项目。
如果主机 cpu 占用高, 可在 package.json 的 watch-poll 参数里添加 --watch-poll=5000,
如果使用 npm run watch 则在 watch 里添加

3年前 评论
不懂就学 3年前
helo (作者) 3年前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!