web-dev-qa-db-ja.com

Vue cli 3ホットリロードが突然ブラウザーで機能しない

Vue cli 3によって生成されたVueプロジェクトがあり、ブラウザーでホットリロードが突然停止しました。コードに加えられた変更は引き続き端末に反映されますが、私のブラウザーには変更が反映されません。新しい変更を有効にするには、手動で更新する必要があります。他の人によって示唆されたように、手動でpoll: trueをvue.config.jsに設定し、プロキシも設定しようとしましたが、両方とも成功しませんでした。

これを再び機能させるための提案はありますか？

更新：

Vueの更新後、突然再び動作を開始しました。この理由はまだわかりません。 vue-cliのバグだったのでしょうか？

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

私の問題は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

:)

14
createdbyjurand

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およびポーリングなしで機能するようになりました。 ））））

ここで出くわした失敗モードの1つは、node_modulesに複数のwebpackがインストールされてしまった場合です。

リロードは、イベントを相互に発行する次の2ビットのコードに依存しています。

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

ただし、複数のWebパックがインストールされている場合（たとえば、トップレベルのものと@ vue/cli-serviceの下にあるもの）、requireは最初の./node_modules/webpack/hot/emitter.jsを解決し、2つ目は./node_modules/@vue/cli-service/node_modules/webpack/hot/emitter.jsに解決します。同じオブジェクトなので、リスナーはイベントを取得せず、リロードは失敗します。

これを解決するために、package-lock.jsonをクリアして単一のトップレベルWebパックに解決するように見える@ vue/cli-serviceをアンインストールして再インストールしました。

これが起こらないことを保証する方法があるかどうかはわかりませんが、vue-cli-3が状況を見つけて、少なくともdevモードで警告を記録することは可能ですか？

[ところで、devServer: { clientLogLevel: 'info' } }をvue.config.jsに追加すると、これをデバッグするのに非常に役立ちました。]

6
Ismoil Shifoev

多分これは役立つことがあります https://webpack.js.org/configuration/watch/#changes-seen-but-not-processed

「システムに利用可能なウォッチャーが十分にあることを確認してください。この値が低すぎる場合、Webpackのファイルウォッチャーは変更を認識しません。」

cat /proc/sys/fs/inotify/max_user_watches

「macOSでは、特定のシナリオでフォルダーが破損する可能性があります。 this の記事を参照してください。」

また、上記のリンクでは、他の既知の問題を確認できます。

0
Oswaldo

現在の端末を終了して、新しい端末を開いてnpm run serveコマンドを実行してください。それは私のために働いた。

参照リンク

幸運を...

0
Akash

これが誰かを助け、私がWebStormで端末を使用していましたが、vue-cli-serviceが機能しなかったことを願っていますvue-cli-serviceの方法

0
Hizmarck