Vue cli 3 горячая перезагрузка внезапно не работает в браузерах

У меня есть проект Vue, сгенерированный Vue cli 3, и моя горячая перезагрузка внезапно перестала работать в моих браузерах. Изменения, внесенные в код, по-прежнему регистрируются терминалом, однако мой браузер не фиксирует эти изменения. Я должен вручную обновить, чтобы забрать новые изменения. Как предложили некоторые другие, я вручную установил poll: true в своем vue.config.js и также попытался установить прокси, но оба не увенчались успехом.

Какие-нибудь предложения, чтобы сделать эту работу снова?

Обновление:

После некоторых обновлений Vue он снова начал работать снова. Я до сих пор не знаю причину этого. Это могло быть ошибкой в vue-cli?

Ответ 1

Моя проблема была WDS
Консоль отображается:

[HMR] Waiting for update signal from WDS...
[WDS] Disconnected!
GET http://ip:port/sockjs-node/info?t=some-number
net::ERR_CONNECTION_TIMED_OUT sockjs.js?some-number

Решение для меня было:
в

package.json

менять

"serve": "vue-cli-service serve",

"serve": "vue-cli-service serve --host localhost",

или же
добавлять

module.exports = {
  devServer: {
    host: 'localhost'
  }
}

vue.config.js

Ответ 2

HMR имеет проблемы в различных средах, в таких ситуациях вы можете помочь себе с опцией опроса:

https://github.com/vuejs-templates/webpack/blob/develop/template/config/index.js#L21

var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  stats: {
    colors: true,
    chunks: false
  },
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  }
})

Кажется, я наконец нашел его: мой $cat /proc/sys/fs/inotify/max_user_watches был на 8192, и это помогло мне:

echo 100000 | sudo tee /proc/sys/fs/inotify/max_user_watches

Теперь горячая перезагрузка Vue работает без sudo и без опроса! ))))

Один из режимов отказа, с которым я здесь столкнулся, - это то, что вам удалось установить несколько пакетов webpack в ваших node_modules.

Перезагрузка опирается на эти два бита кода, передающих события друг другу:

webpack-dev-server/client/index.js

    var hotEmitter = require('webpack/hot/emitter');
    hotEmitter.emit('webpackHotUpdate', currentHash);

webpack/hot/dev-server.js

    var hotEmitter = require("./emitter");
    hotEmitter.on("webpackHotUpdate", function(currentHash) {

Однако, если у вас установлено несколько веб-пакетов (например, один и один верхнего уровня в @vue/cli-service), запрос будет преобразовывать первый в ./node_modules/webpack/hot/emitter.js, а второй в ./node_modules/@vue/cli-service/node_modules/webpack/hot/emitter.js, которые не являются тот же объект и поэтому слушатель никогда не получает событие и перезагрузка не удалась.

Чтобы решить эту проблему, я просто удалил и переустановил @vue/cli-service, который, по-видимому, очищал package-lock.json и преобразовывался в единый веб-пакет верхнего уровня.

Я не знаю, есть ли какой-нибудь способ убедиться, что этого не произойдет, - однако vue-cli-3 может определить ситуацию и, по крайней мере, записать предупреждение в режиме dev?

[Кстати, добавление devServer: { clientLogLevel: 'info' } } в vue.config.js действительно помогло отладить это.]

Ответ 3

Попробуйте выйти из текущего терминала, открыть новый и запустить команду npm run serve. Это сработало для меня.

Ссылка

Удачи...

Ответ 4

Может быть, это поможет https://webpack.js.org/configuration/watch/#changes-seen-but-not-processed

"Убедитесь, что в вашей системе достаточно доступных наблюдателей. Если это значение слишком мало, средство просмотра файлов в Webpack не распознает изменения:"

cat /proc/sys/fs/inotify/max_user_watches

"В macOS папки могут быть повреждены в определенных сценариях. См. эту статью."

А по ссылке выше вы можете проверить другие известные проблемы.

Ответ 5

Я надеюсь, что это может кому-то помочь, я использовал терминал в своем WebStorm и vue-cli-service не работал, затем я открыл обычный терминал и что, может быть, что-то в WebStorm не позволило путь в вью-кли-сервис