株式会社アイオーアーキテクトは、オープンソースなどを活用してシステム運用を最適にご提供します。

2022/05/16　平見知久

Tweet

vue-cliで作成したVue.jsプロジェクトでホットリロードが効かない場合の対処

今回は開発者向けのおはなしです。

お遊びでVue.js触ろうと思って、vue-cliでプロジェクトのscaffoldを作成したのですが、ホットリロードが効かない。ググると結構あるあるのようです。ただ、スタックのバージョンによってころころ変わるようで、ググった限りで同じ方法で解決している方いらっしゃらなかったのでメモ兼ねてご紹介しておきます。

スタックは以下の通り。2022/5/15時点の組み合わせです。

• nodejs: 18.1.0
• npm: 8.8.0
• @vue/cli : 5.0.4
• vue: 3.2.33

Node.jsはWSL上で動かしてブラウザはWindows側です。

結論から行くと、vue.config.jsを以下のように編集。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    watchOptions :{
      aggregateTimeout: 300,
      poll: 1000
    }
  }
})

私の環境ではこの設定でホットリロードかかるようになりました。

ググって試したのを書いておくと、

https://qiita.com/ntm718/items/6023b0063f78d53192a1

module.exports = {
  configureWebpack: {
    devServer: {
      watchOptions: {
        poll: true
      }
    }
  }
}

defineConfigがないので合わず。

https://www.miracleave.co.jp/contents/1333/post-1333/

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    watch: true
  }
})

[DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A ‘callback’ argument needs to be provided～みたいな警告が出て、起動はするものの効かず。

https://stackoverflow.com/questions/53589853/vue-cli-3-hot-reload-suddenly-not-working-in-browsers

やっぱだめ

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    watchOptions: {
      poll: true
    }
  }
})

Invalid optionsで起動せず。

webpackまわりっぽいので、そっちで調べて

https://github.com/vuejs-templates/webpack/issues/432

あたりからこれまでのいくつかの設定方法を組み合わせて冒頭の設定に行き着きました。

スタックが大きいと厄介ですねぇ。ともあれこれまでの対応を残してくださってる皆様に感謝です。