ЗАМЕНА ГОРЯЧЕГО МОДУЛЯ My Vue (HMR) не работает. Что у меня есть и что я делаю:
- локальный сервер по адресу http: \ db7 \ на порту 80 в Windows 10 (xampp с php 7.2.6)
- Laravel последняя версия с
composer install и npm install
- следующий пакет.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"
}
}
- в шаблоне (лезвие) у меня есть
<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. В app.js нет никаких изменений, если я снова открою
localhost:8080//js/app.js в браузере вручную.
My webpack.mix.js в корневой папке laravel:
let mix = require ('laravel-mix');
mix.js ('resources / assets / js / app.js', 'public / js')
.sass ('resources / assets / sass / app.scss', 'public / css');
Шаг за шагом:
- Установить свежий карабин
composer create-project --prefer-dist laravel/laravel blog
npm inpm run dev- Открыть
resources\views\welcome.blade.php удалить все между <body></body> и добавить следующее (см. Внизу)
- Регистрация в хроме
http://blog/public/. Я вижу «Пример компонента».
- Откройте Chrome DevTools на странице и откройте в ней консоль.
- В cmd для папки проекта запустите
npm run hot и дождитесь компиляции
- Жесткая перезагрузка страницы на Chrome (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>
Помогите, пожалуйста!