Table of Contents
はじめに
最近はVue3対応に向けて奮闘しています。コードの補完がかなり効きやすくなっていい感じです！
そんな恩恵を感じつつVue3対応の一環でVuetify3のデバッグ中に気づいたのですが、developmentモードになっているのに、なぜかVue Devtools が動きませんでした。Vue Devtoolsには認識されているのですが、エラーメッセージを表示するだけでした。
Vue.js is detected on this page.Devtools inspection is not available because it's in production mode or explicitly disabled by the author.結局、根本原因は分かってないのですが、強制的に表示する方法を見つけたので、それについて紹介します。
| ツール | バージョン |
|---|---|
| vue | 3.3.7 |
| vite-plugin-ruby | 5.0.0 |
| vite | 5.0.5 |
VUE_PROD_DEVTOOLS****をtrueに設定
Vue2まではVue.config.devtoolsをtrueにすることで強制的にONにできましたが、Vue3からはオプション自体がなくなったみたいです。色々調べると、vite.config.tsでグローバル変数として__VUE_PROD_DEVTOOLS__にtrueを設定すると強制的に表示することができました。
単純に__VUE_PROD_DEVTOOLS__ をtrueにするだけでもいいのですが、自分は本番ビルド時はオフにしたいのでmodeを使って分けるようにしてしました。このmodeはviteの条件付き設定という機能の一部です。
export default defineConfig(({ mode }) => { return { define: { __VUE_PROD_DEVTOOLS__: mode === "development" ? true : false, }, plugins: [ /* 色々設定 */ ], // 色々設定… };});__VUE_PROD_DEVTOOLS__はBundler Build Feature Flagsという機能で**、**他にもOptions APIを無効にすることができるフラグもあります。
終わりに
根本原因は分かってないのですが、無理やりVue Devtoolsを表示することができました。個人開発のStarryKidsは普通にVue Devtoolsが動いているのが謎です…vite_rubyの影響か…？と思いつつも、それらしきIssueも見当たりませんでした。まぁ動いたのでよし！ということにしておきます。