Vue DevtoolsをExpress.jsから実行しても使えるようにする

はじめに

VueのアプリをViteからではなくExpress.jsなど別のところから実行したときに、ブラウザで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.
と出ることがあります。

プロダクション環境で実行すればいいのでしょうが、vite buildのオプションを変えてもうまくいかず、node main.jsに--env developmentとつけてもうまくいかず‥

調べてみると、以下のChrome拡張機能を入れると強制的に開発環境で実行されるようです。

2025.03.08追記

vite.config.tsでプロキシを設定するとサーバーへのアクセスはしつつviteのHMRの恩恵を受けられるので、開発環境ではviteからサーブしたほうが良いです。

vite.config.ts

export default defineConfig({
  //...
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:8105"
      }
    }
  }
  //...
});

参考