文章/答案/技术大牛

发布

社区首页 >问答首页 >Laravel 5 Vue热模组更换(HMR)

问Laravel 5 Vue热模组更换(HMR)
EN

Stack Overflow用户

提问于 2018-06-25 07:48:23

回答 1查看 4.5K关注 0票数 0

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

http:\db7\ on 80在Windows 10上的本地服务器(xampp与php 7.2.6)
composer install和npm install的最新版本
next 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清除- so中不运行netstat -ano | findstr 8080时，8080端口不使用.当npm run hot正在运行时- 8080正在监听.
当我使用控制台中的应用程序运行npm run hot和重新加载页面时，没有像"HMR正在运行“和e.t.c这样的消息。
当我在我的Vue组件中做任何更改时，我在我的PHPStorm控制台中看到了“成功编译”，但是在浏览器中没有任何更改。还有更多-没有任何变化，如果我重新加载页面与ctrl+f5或打开页面在铬隐名模式。如果我也在浏览器中重新打开app.js，那么在localhost:8080//js/app.js中没有任何改变。
我在laravel根文件夹中的webpack.mix.js：让mix =需要(‘laravel-mix’)； Mix.js(资源/资产/js/app.js，'public/js') .sass(资源/资产/sass/app.scss，'public/css')；

一步步地：

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

#4代码

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

救救我吧！

laravel

laravel-5

webpack

vue.js

webpack-hmr

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-25 08:41:27

目前看来，热门模块替换功能被窃听了。这是暂时的解决办法，但不能解决CSS重新加载之类的问题：

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

我们得等待适当的解决办法。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51018510

复制

相似问题

问Laravel 5 Vue热模组更换(HMR)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Laravel 5 Vue热模组更换(HMR)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Laravel 5 Vue热模组更换(HMR)
EN