web-dev-qa-db-de.com

Vue cli 3 hot reload funktioniert in Browsern plötzlich nicht

Ich habe ein Vue-Projekt, das vom Vue cli 3 generiert wurde, und mein heißes Neuladen hörte plötzlich auf, in meinen Browsern zu arbeiten. Am Code vorgenommene Änderungen werden weiterhin vom Terminal erfasst, mein Browser nimmt die Änderungen jedoch nicht auf. Ich muss manuell aktualisieren, um die neuen Änderungen zu übernehmen. Wie von einigen anderen vorgeschlagen, habe ich manuell poll: true in meinem vue.config.js eingestellt, und ich habe auch versucht, den Proxy einzustellen, aber beide hatten keinen Erfolg.

Irgendwelche Vorschläge, damit das wieder funktioniert?

8
Gilian

Mein Problem war WDS
Angezeigte Konsole:

[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

Lösung für mich war:
im

package.json

veränderung

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

zu

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

oder
hinzufügen

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

zu

vue.config.js

:)

5
createdbyjurand

HMR hat Probleme in verschiedenen Umgebungen. In solchen Situationen können Sie sich vielleicht selbst mit der Umfrageoption helfen:

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

Anscheinend habe ich es endlich gefunden: mein $cat /proc/sys/fs/inotify/max_user_watches war auf 8192 und das hat mir geholfen:

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

Jetzt funktioniert Vue hot reload ohne Sudo und ohne Umfrage! ))))

Ich habe hier einen Fehlermodus gefunden, wenn Sie mehrere Webpack-Installationen in Ihren node_modules installiert haben.

Das Neuladen basiert auf diesen beiden Codebits, die aufeinander folgende Ereignisse ausgeben:

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

Wenn Sie jedoch mehrere Webpacks installiert haben (z. B. ein Top-Level-Paket und eines unter @ vue/cli-service), werden das erste zu ./node_modules/webpack/hot/emitter.js und das zweite zu ./node_modules/@vue/cli-service/node_modules/webpack/hot/emitter.js aufgelöst, die nicht dasselbe Objekt sind ruft das Ereignis ab und das Neuladen schlägt fehl.

Um dieses Problem zu lösen, habe ich @ vue/cli-service gerade deinstalliert und neu installiert. Dies schien die package-lock.json zu löschen und löste sich auf das einzige Webpack der obersten Ebene auf.

Ich weiß nicht, ob es einen Weg gibt, um sicherzustellen, dass dies nicht passiert. Möglicherweise kann vue-cli-3 die Situation erkennen und zumindest eine Warnung im Dev-Modus protokollieren.

[BTW, das devServer: { clientLogLevel: 'info' } } zu vue.config.js hinzufügte, war beim Debuggen wirklich hilfreich.]

4
Ismoil Shifoev

Vielleicht kann dies helfen https://webpack.js.org/configuration/watch/#changes-seen-but-not-processed

"Vergewissern Sie sich, dass in Ihrem System genügend Beobachter verfügbar sind. Wenn dieser Wert zu niedrig ist, erkennt der Dateiüberwacher in Webpack die Änderungen nicht."

cat /proc/sys/fs/inotify/max_user_watches

"Unter macOS können Ordner in bestimmten Szenarien beschädigt werden. Siehe this article."

Über den Link oben können Sie andere bekannte Probleme überprüfen.

0
Oswaldo

Beenden Sie das aktuelle Terminal, öffnen Sie ein neues und führen Sie den Befehl npm run serve aus. Es hat für mich funktioniert.

Referenzlink

Viel Glück...

0
Akash

Ich hoffe, das könnte jemandem helfen, ich hatte das Terminal in meinem WebStorm verwendet und der vue-cli-Dienst funktionierte nicht, dann habe ich ein normales Terminal geöffnet und das war es, vielleicht hat etwas in WebStorm nicht das Richtige zugelassen übrigens im vue-cli-service

0
Hizmarck