Мой Vue HOT MODULE REPLACEMENT (HMR) не работает. Что у меня есть и чем я занимаюсь:
- локальный сервер на http: \ db7 \ на порту 80 в Windows 10 (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 (лезвие) у меня есть
<script src="{{ mix('js/app.js') }}"></script>, и когда я открываю страницу и смотрю код страницы, я вижу<script src="//localhost:8080//js/app.js"></script>. Когдаnpm run hotя могу видеть свои js, если открываюlocalhost:8080//js/app.jsвручную из браузера. Я тоже пытаюсь написать URL вручную в шаблоне -<script src="http://localhost:8080/js/bundle.js"></script>. Тот же результат. - Когда
npm run hotНЕ запускаетсяnetstat -ano | findstr 8080в cmd clear - значит, порт 8080 не используется. Когда запущенnpm run hot- 8080 СЛУШАЕТ. - Когда я запускаю
npm run hotи перезагружаю страницу с приложением в консоли, никаких сообщений типа «HMR is running» и т.д. - Когда я делаю какие-либо изменения в своих компонентах Vue, я вижу, что в моей консоли PHPStorm «успешно скомпилировано», но в браузере никаких изменений. И еще - никаких изменений нет, если я перезагружу страницу с помощью ctrl + f5 или открою страницу в режиме chrome incognito. Если я снова открою
localhost:8080//js/app.jsв браузере вручную, в app.js не будет никаких изменений. Мой
webpack.mix.jsв корневой папке laravel:let mix = require ('laravel-mix');
mix.js ('ресурсы / активы / js / app.js', 'public / js') .sass ('ресурсы / активы / sass / app.scss', 'public / css');
Шаг за шагом:
- Установите свежий laravel
composer create-project --prefer-dist laravel/laravel blog npm inpm run dev- Откройте
resources\views\welcome.blade.php, удалите все между<body></body>и добавьте следующее (см. Внизу) - Зарегистрируйтесь в chrome
http://blog/public/. Я вижу «Пример компонента». - Откройте chrome DevTools на странице и откройте в ней консоль.
- В cmd в папке проекта запустите
npm run hotи дождитесь компиляции - Жесткая перезагрузка страницы в хроме (ctrl + f5). В консоли я вижу только следующее. Нет HRM.
- Попробуйте изменить компонент 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>
Помогите пожалуйста!
