一行要約。
Vue Devtool の standalone 版でインターセプトすれば良い。
環境は Windows10 だが、OSを問わない解決法。
なんなら React の react-devtools も同じ方法で解決するはず。
はじめに Tauri の宣伝
皆さん Tauri をご存知ですか？
超意訳すると超軽量版 Electron です。
RC版が出たと騒がれていたので触ってみると、まさに私が求めていたもの！
正直、これからのデスクトップ向けアプリはこれでいいのでは？（Web屋さんの感想）
と思うほどでした。
とにかく軽量なのが偉い。
Rustという言語が取っつきにくい場合、ブラウザの世界でコードを書くことも可能ではあるので、ぜひお試しあれ。
electron はビルド周りがゴチャっとしてて、生成ファイルが大きすぎるのが、個人的バットポイント。
Vue Devtool が使えない！
Windows での Tauri は、WebView2 という内部ブラウザを使用してレンダリングします。
これが曲者で、拡張機能が使用できない...
つまり Vue 開発の味方 Vue Devtools が使えないのです；；
（知らない方は損しすぎなので、とりあえずDL！）
拡張機能の議論はこのあたり。
あんまり乗せる気は無さそう...Add Ons or Extensions with WebView2 · Issue #98 · MicrosoftEdge/WebView2Feedback
https://github.com/MicrosoftEdge/WebView2Feedback/issues/98
色々検索しても対策がヒットせず、途方に暮れて拡張機能のDocに迷い込みました。
すると standalone 版があるではないですか！
きたこれ！
（昔こんなの無かった気がするんだが？？）
standalone Vue Devtools
とりあえずグローバルに yarn でインストールする。
npm マンは npm install に読み替えて。
# グローバルにインストール
$ yarn add --global -D @vue/devtools
# 起動
$ yarn vue-devtools
なんか出てきた。
<script src="http://localhost:8098"></script>
を埋め込めとおっしゃっている。
Vue の場合
index.html に script を埋め込む。
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>Vite App</title>
<script src="http://localhost:8098"></script>
</head>
...
Nuxt3 の場合
nuxt.config.ts に script を埋め込む。
&& 演算を使って、production のときだけコードを記載するようにする。
2でも似たような感じで。
const isProduct = process.env.NODE_ENV === 'production'
export default defineNuxtConfig({
...
app: {
head: {
script: [
!isProduct && { src: 'http://localhost:8098' },
],
},
},
}
多分どこに埋め込んでも問題ないので、いい感じにやればOK。
その後 $ yarn tauri dev でアプリを起動すると。。。
！！！
！！！！！
おわりに
リリース時にはこのコードが載らないようにしましょう！！！
そのまま残したら立派なセキュリティホールです。
process.env.NODE_ENV を使って、開発モードが production ではない時だけ埋め込むのが賢そう。
良き Tauri Vue ライフを🙌