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

Question

我正在尝试使用Laravel mix和Vagrant进行热模块更换。我的JS/CSS是在主机上编译的，网站运行在一个Vagrant框中。我已经按照这里的指示做了。我正在运行

npm run hot

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

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

这将正确地返回脚本(即使其中有两个斜杠(。。但是HMR仍然不起作用，我在控制台中收到了这些错误：

[WDS]已断开连接！

主机/原点标头无效

如何让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

在流浪虚拟机上运行npm run watch/npm run hot时出现问题。现在，我直接在我的机器上运行这些命令。

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

Web服务器具有IP192.168.10.10并且我使用CCD_ 7。

在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"
},