web-dev-qa-db-fra.com

Vue cli 3 hot reload soudainement ne fonctionne pas dans les navigateurs

J'ai un projet Vue généré par la Vue cli 3 et mon rechargement à chaud a soudainement cessé de fonctionner dans mes navigateurs. Les modifications apportées au code sont toujours récupérées par le terminal. Cependant, mon navigateur ne les prend pas. Je dois actualiser manuellement afin de prendre en compte les nouvelles modifications. Comme suggéré par d'autres, j'ai défini manuellement poll: true dans mon vue.config.js et j'ai également essayé de définir le proxy, mais les deux n'ont pas abouti.

Des suggestions pour que cela fonctionne à nouveau?

vue.jswebpack-dev-servervue-clivue-cli-3
8
Gilian

Mon problème était WDS
Console affichée:

[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

La solution pour moi était:
dans

package.json

changement

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

à

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

ou
ajouter

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

à

vue.config.js

:)

5
createdbyjurand

HMR a des problèmes dans divers environnements. Dans ces situations, vous pouvez peut-être vous aider avec l'option de sondage:

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
  }
})

On dirait que je l'ai finalement trouvé: mon $cat /proc/sys/fs/inotify/max_user_watches était sur 8192 et cela m'a aidé:

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

Maintenant, Vue hot reload fonctionne sans Sudo et sans sondage! ))))

Un mode d'échec que j'ai rencontré ici est si vous avez réussi à vous retrouver avec plusieurs installations de webpack dans vos node_modules.

Le rechargement repose sur ces deux bits de code qui émettent des événements l'un à l'autre:

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) {

Cependant, si vous avez installé plusieurs packs Web (par exemple, un paquet de niveau supérieur et un sous @ vue/cli-service), le besoin résoudra le premier en ./node_modules/webpack/hot/emitter.js et le second en ./node_modules/@vue/cli-service/node_modules/webpack/hot/emitter.js, qui ne sont pas le même objet, de sorte que l'auditeur ne obtient l'événement et les recharges échouent.

Pour résoudre ce problème, je viens de désinstaller et de réinstaller @ vue/cli-service, ce qui semblait effacer le package-lock.json et le résoudre en un seul pack Web de niveau supérieur.

Je ne sais pas s'il y a moyen de faire en sorte que cela ne se produise pas. Cependant, vue-cli-3 pourrait peut-être détecter la situation et au moins enregistrer un avertissement en mode dev?

[L'ajout de devServer: { clientLogLevel: 'info' } } à vue.config.js a été très utile pour le débogage.]

4
Ismoil Shifoev

Peut-être que cela peut aider https://webpack.js.org/configuration/watch/#changes-seen-but-not-processed

"Vérifiez que vous avez suffisamment d'observateurs disponibles sur votre système. Si cette valeur est trop basse, l'observateur de fichiers de Webpack ne reconnaîtra pas les modifications:"

cat /proc/sys/fs/inotify/max_user_watches

"Sous macOS, les dossiers peuvent être corrompus dans certains scénarios. Voir this article."

Et dans le lien ci-dessus, vous pouvez vérifier d'autres problèmes connus.

0
Oswaldo

Essayez de quitter le terminal actuel, ouvrez-en un nouveau et exécutez la commande npm run serve. Cela a fonctionné pour moi.

Lien de référence

Bonne chance...

0
Akash