热模块替换不适用于 Laravel Mix 和 Vagrant

Question

我正在尝试使用 Laravel mix 和 Vagrant 进行热模块替换。我的 JS/CSS 是在主机上编译的，网站是从 Vagrant box 运行的。 I have followed the instructions here。我是运行

npm run hot

在主机上。当我更改 JS/CSS 文件时，文件会被编译。正确的 url 似乎是在网站中生成的。当我查看页面源代码时，我看到：

<script src="//localhost:8080//js/min/myfile.min.js"></script>

这是正确的 returns 脚本（即使那里有两个斜线）。但是 HMR 仍然无法正常工作，我在控制台中收到这些错误：

[WDS] Disconnected!

Invalid Host/Origin header

如何让 HMR 为 Vagrant 工作？

Answer 1

在 package.json 的 scripts 部分禁用 hot 脚本的主机检查

"hot": "cross-env NODE_ENV=development 
node_modules/webpack-dev-server/bin/webpack-dev-server.js
--inline --hot --disable-host-check 
--config=node_modules/laravel-mix/setup/webpack.config.js",

因为 Laravel 网站托管在不同的主机上，并且 webpack 开发服务器会引发该安全标志

Answer 2

我在 vagrant VM 上运行ning npm run watch/npm run hot 时遇到问题。现在，我运行直接在我的机器上执行这些命令。

https://laravel-mix.com/docs/6.0/hot-module-replacement

网络服务器有 IP 192.168.10.10 我使用 "laravel-mix": "^6.0.25".

在app.php中：

@production
    <script src="{{ asset('js/manifest.js') }}"></script>
    <script src="{{ asset('js/vendor.js') }}"></script>
    <script src="{{ asset('js/app.js') }}"></script>
@endproduction

@env('local')
    <script src="http://localhost:8080/js/manifest.js"></script>
    <script src="http://localhost:8080/js/vendor.js"></script>
    <script src="http://localhost:8080/js/app.js"></script>
@endenv

在package.json中：

"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
},

热模块替换不适用于 Laravel Mix 和 Vagrant

Hot Module Replacement not working with Laravel Mix and Vagrant

laravel

vagrant

laravel-mix

hot-module-replacement