Laravel 5 Vue 热模块更换（HMR）
Posted
技术标签:
【中文标题】Laravel 5 Vue 热模块更换（HMR）【英文标题】：Laravel 5 Vue hot module replacement (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 它工作！谢谢！你会创建答案吗？ 【参考方案1】：热模块更换功能目前似乎有问题。这是一个临时解决方法，但这并不能解决 CSS 重新加载等问题：
https://github.com/JeffreyWay/laravel-mix/issues/1483#issuecomment-366685986
我们将不得不等待适当的修复。
【讨论】：
以上是关于Laravel 5 Vue 热模块更换（HMR）的主要内容，如果未能解决你的问题，请参考以下文章