Question

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

有人请帮忙，我该怎么做？

Answer 1

重要更新！

忘记我之前所说的内容，现在更新了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。

请查看混合更新文档here

重要更新结束

根据您需要在项目上以及脚本或样式表参考中运行npm run hot的文档：

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

因此mix()功能会将您的资源网址指向http://localhost:8080/。

buuuuuuuut ...这就是文档所说的内容，您可以看到bower-angular。我无法在运行arch linux的laravel全新安装上运行，所有内容都应该编译，mix()函数指向8080但没有注入任何内容，我回来了在Ctrl+R年龄。

希望你有更多的运气！

Answer 2

您仍然可以使用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>：

之前的页面底部添加此代码段

@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

Answer 3

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

我的2美分就是如果你要升级到新的东西，至少要确保灵丹妙药上的任何东西都是混合物。

Answer 4

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

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

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

npm install -g livereload

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

npm install livereload

3）将此代码段放在 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按钮

那就是它！

Answer 5

以下是我在Laravel＆gt; = 5.4和Laravel.mix https://komelin.com/articles/configuring-webpack-livereload-laravelmix

中使Webpack LiveReload工作的方式

Answer 6

如果某人需要另一种方法使其正常工作，例如如果后端没有使用混合，那么我就是这样解决的：

从项目根目录编辑 server.php 并替换COUNT：

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

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

6 个答案:

重要更新！

重要更新结束