Laravel 5 Vue模块热替换（HMR）

Question

我的 Vue 热模块替换 (HMR) 不工作。我所拥有的和我所做的：

http:\db7\ 上的本地服务器 Windows 10 上的端口 80（xampp 与 php 7.2.6）
laravel 最新版本 composer install 和 npm install
下一个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 模板 (blade) 中，我有 <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>。同样的结果。
When npm run hot NOT 运行ing netstat -ano | findstr 8080 in cmd clear - 因此，8080 端口未使用。当 npm run hot 正在运行ing - 8080 正在收听。
当我运行 npm run hot 并在控制台中使用应用程序重新加载页面时，没有任何消息，例如 "HMR is running" 和 e.t.c。
当我对我的 Vue 组件进行任何更改时，我看到 "Compiled successfully" 在我的 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/。我可以看到 'Example Component'.
打开页面上的 chrome DevTools 并在其中打开控制台。
在项目文件夹运行 npm run hot 的 cmd 中等待编译
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>

请帮帮我！

Answer 1

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

等问题

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

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

Laravel 5 Vue模块热替换（HMR）

Laravel 5 Vue hot module replacement (HMR)

laravel

webpack

vue.js

laravel-5

webpack-hmr