Laravel 5 Vue 热模块更换（HMR）答案

【问题标题】：Laravel 5 Vue hot module replacement (HMR)Laravel 5 Vue 热模块更换（HMR）
【发布时间】：2018-12-03 17:40:09
【问题描述】：

我的 Vue 热模块更换 (HMR) 无法正常工作。我有什么和我做什么：

Windows 10 端口 80 上 http:\db7\ 上的本地服务器（带有 php 7.2.6 的 xampp）
带有composer install和npm install的laravel最新版本
下一个 package.json: { "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "live": "cross-env NODE_ENV=development webpack-dev-server --open --hot" }, "devDependencies": { "axios": "^0.18", "bootstrap": "^4.1.1", "cross-env": "^5.2.0", "jquery": "^3.2", "laravel-mix": "^2.0", "lodash": "^4.17.10", "popper.js": "^1.14.3", "vue": "^2.5.7" }, "dependencies": { "ajv": "^6.5.1", "bootstrap-datepicker": "^1.8.0", "js-cookie": "^2.2.0", "moment": "^2.22.2", "vue-flatpickr-component": "^7.0.4", "vue-router": "^3.0.1", "vue-snotify": "^3.1.0", "vuex": "^3.0.1" } }
在 laravel 模板（刀片）中我有 <script src="{{ mix('js/app.js') }}"></script>，当我打开页面并查看页面代码时，我看到 <script src="//localhost:8080//js/app.js"></script>。当npm run hot 从浏览器手动打开localhost:8080//js/app.js 时，我可以看到我的js。我也尝试在模板中手动编写 url - <script src="http://localhost:8080/js/bundle.js"></script>。结果相同。
当npm run hot 没有在 cmd 中运行 netstat -ano | findstr 8080 时 - 所以，8080 端口没有使用。当 npm run hot 正在运行时 - 8080 正在监听。
当我运行 npm run hot 并在控制台中重新加载应用程序页面时，没有任何消息，如“HMR 正在运行”等
当我对我的 Vue 组件进行任何更改时，我看到在我的 PHPStorm 控制台中“编译成功”，但在浏览器中没有任何更改。还有更多 - 如果我使用 ctrl+f5 重新加载页面或以 chrome 隐身模式打开页面，则没有任何更改。如果我也手动在浏览器中重新打开 localhost:8080//js/app.js，那么 app.js 没有任何变化。
我的 webpack.mix.js 在 laravel 根文件夹中：

让 mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css');

一步一步：

安装新鲜的laravel composer create-project --prefer-dist laravel/laravel blog
npm i
npm run dev
打开resources\views\welcome.blade.php 删除<body></body> 之间的所有内容并添加下一个（见底部）
签入 chrome http://blog/public/。我可以看到“示例组件”。
在页面上打开 chrome DevTools 并在其中打开控制台。
在项目文件夹的cmd中运行npm run hot并等待编译
chrome (ctrl+f5) 上的硬重新加载页面。在控制台中我see only next。没有人力资源管理。
尝试更改 vue 组件。在resources\assets\js\components\ExampleComponent.vue 中添加任何符号到模板中的 html 代码并检查 chrome 页面 - 没有任何更改。硬重新加载页面 - 没有任何更改！
我不会做以上描述的事情

#4 的代码

<div id="app">
    <example-component></example-component>
</div>
<script src="{{ mix('js/app.js') }}"></script>

请帮帮我！

【问题讨论】：

HMR 功能应该与 websocket 一起运行，您是否尝试过检查网络选项卡中的 websocket 连接数据，看看那里是否有问题？
@Stephan-v WS (DevTools->Network->WS) 上没有任何活动。是的 - 我重新加载页面
或许这能帮上忙：github.com/JeffreyWay/laravel-mix/issues/… 目前好像坏掉了。
@Stephan-v 它工作！谢谢！你会创建答案吗？

标签： laravel laravel-5 webpack vue.js webpack-hmr

【解决方案1】：

热模块更换功能目前似乎有问题。这是一个临时解决方法，但这并不能解决 CSS 重新加载等问题：

https://github.com/JeffreyWay/laravel-mix/issues/1483#issuecomment-366685986

我们将不得不等待适当的修复。

【讨论】：