Question

我的Vue热模块更换（HMR）无法正常工作。我所拥有的和我所做的：

Windows 10上端口80上http：\ db7 \上的本地服务器（带有php 7.2.6的xampp）
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模板（刀片式）中，我有<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 clear中运行netstat -ano | findstr 8080，则8080端口未使用。 npm run hot正在运行时-8080正在侦听。
当我运行npm run hot并在控制台中重新加载带有应用程序的页面时，没有任何消息，例如“ HMR正在运行”和e.t.c。
当我在Vue组件中进行任何更改时，看到的是PHPStorm控制台中的“已成功编译”，但在浏览器中未进行任何更改。还有更多-如果我使用ctrl + f5重新加载页面或以Chrome隐身模式打开页面，则没有任何更改。如果我也手动在浏览器中重新打开localhost:8080//js/app.js，则app.js也没有任何变化。
我的webpack.mix.js在laravel根文件夹中：

let mix = require（'laravel-mix'）;

mix.js（'资源/资产/js/app.js'，'公共/ 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>

请帮助我！

Answer 1

似乎热模块更换功能当前存在错误。这是一个临时的解决方法，但是不能解决CSS重新加载之类的问题：

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

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

Laravel 5 Vue热模块更换（HMR）

1 个答案: