Laravel 5.4 - Mix - 如何运行浏览器实时重新加载

Posted 2023-02-22

【中文标题】Laravel 5.4 - Mix - 如何运行浏览器实时重新加载

【英文标题】：Laravel 5.4 - Mix - How to run browser live reload

【发布时间】：2017-06-22 05:16:05

【问题描述】：

我在我的项目中使用 Laravel 5.4 并尝试使用 Mix 设置前端构建系统。一切正常，除了我无法获得浏览器自动重新加载选项。文档上没有任何关于它的内容。

请有人帮忙，我怎样才能做到这一点？

【问题讨论】：

请看我的回答。

【参考方案1】：

对于我接下来要做的项目：

1) 安装 chrome 浏览器扩展 Livereload https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

2) 全局安装 livereload（通过 CLI）：

npm install -g livereload

或在您的项目文件夹中本地（通过 CLI）：

npm install livereload

3) 将此 sn-p 放入您的 layout.blade.php 或其他模板中：

<script>
   document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
        ':35729/livereload.js?snipver=1"></' + 'script>')
</script>

4) 在项目文件夹中运行 livereload（通过 CLI）：

livereload

5) 在 Chrome 浏览器中按下 livereload 按钮

就是这样！

【参考方案2】：

如果有人需要另一种方法来使其工作，例如，如果在后端不使用 mix，我是这样解决的：

从项目根目录编辑 server.php 并替换 return false;:

if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) 
    return false;

如下：

if ($uri !== '/' && file_exists(__DIR__.'/public'.$uri)) 

    // set log file for debugging purposes if needed
    #ini_set('error_log', __DIR__ . '/storage/logs/laravel.log');

    header("HTTP/1.1 301 Moved Permanently");
    header("Location: http://localhost:8080" . $uri);

    exit();

当然你需要同时启动artisan serve和npm run hot

【参考方案3】：

重要更新！

忘记我之前说的吧，现在 laravel mix 已经更新，并且在功能和文档方面做了一些改进。

现在你可以简单了：

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

// Or:

mix.browserSync(
    proxy: 'my-domain.dev'
)

然后npm run watch，你就可以开始了！

如果你想更新你的 webpack 版本，请将 package.json 上的版本更改为 *:

"laravel-mix": "*",

然后运行npm update laravel-mix。

请查看混合更新文档on github

重要更新结束

根据文档，您只需要在您的项目上运行 npm run hot 并在您的脚本或样式表参考中使用：

<link rel="stylesheet" href=" mix('css/app.css') ">

所以mix() 函数会将您的资产网址指向http://localhost:8080/。

buuuuuuuut...这就是文档所说的，正如您所见here。我无法让它在运行 arch linux 的 laravel 全新安装上运行，一切都按原样编译，mix() 函数指向8080，但没有注入任何东西，我又回到了Ctrl+R 年龄。

希望你有更多的运气！

【讨论】：

selim-mahmud（无法标记您）和 @jayswager，请查看我的更新，现在一切正常。 :)

遵循标准的 laravel 文档并运行 npm update laravel-mix 为我工作，谢谢 +1

【参考方案4】：

您仍然可以使用browser-sync。 Laravel 5.4 随 webpack 一起提供，并且有一个插件：browser-sync-webpack-plugin。

安装browser-sync的东西：

npm install --save-dev browser-sync browser-sync-webpack-plugin

添加到webpack.mix.js：

const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

mix.webpackConfig(
   plugins: [
       new BrowserSyncPlugin(
           files: [
               'app/**/*',
               'public/**/*',
               'resources/views/**/*',
               'routes/**/*'
           ]
       )
   ]
);

在页面底部</body>之前添加这个sn-p：

@if (getenv('APP_ENV') === 'local')
<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.18.6'><\/script>".replace("HOST", location.hostname));
    //]]>
</script>
@endif

同时启动 Laravel 和 webpack-dev-server：

php artisan serve & npm run watch

【讨论】：

在 assets/js 中的文件被触及后，如何重新编译或触发 gulp (elixir)？我可以把这个配置放在我的 gulpfile 上吗？

【参考方案5】：

是的，我一直有同样的问题，我会说坚持使用 elixir，因为如果您查看 github，它完全是一团糟。从引导程序加载字体存在问题，组合方法流存在问题，甚至有太多问题无法详细介绍。它太新了，他们没有解决所有问题。

我的 2 美分是，如果您要升级到新的东西，至少要确保开箱即用的长生不老药有效。

【讨论】：

我同意你的观点，来自人力资源管理网站本身：“请注意，热模块更换 (HMR) 仍然是一个实验性功能。”、“它是实验性的，没有经过彻底测试。” “预计会出现一些错误”“理论上可用于生产，但将其用于严重的事情可能还为时过早”

您仍然可以使用browser-sync。 Laravel 5.4 随 webpack 一起提供，并且有一个插件：browser-sync-webpack-plugin.