TauriにVueフレームワークのNuxt3を導入するまで（ついでにTailwindcssとRome）_ビルド編

はじめに

前回の続き↓

前回の記事に記載し忘れた、環境・ツール等バージョンは以下の通り。(2023/5/14時点)
os：Windows 11
Rust：1.69.0
Node.js：18.15.0
yarn：1.22.19
tauri-cli：1.3.0

ビルド実行

yarn tauri buildでビルドを実行する。

$ yarn tauri build

---省略---

   Compiling webview2-com v0.19.1
    Finished release [optimized] target(s) in 3m 24s
        Info Target: x64
     Running candle for "main.wxs"
     Running light to produce

--省略---

Done in 248.60s.

ビルドが成功したら「src-tauri\target\release」ディレクトリに生成された「tauri-nuxt3-tailwind-rome-template.exe」ファイルを実行

「tauri.localhost により、接続が拒否されました。」と出てしまう。

一旦yarn tauri build --debugでデバッグモードで起動してみると「Asset `index.html` not found; fallback to index.html.html」の出力が。
index.htmlが見つからないとのことなので「"distDir": "../dist"」が指し示すディレクトリを確認したところindex.htmlは存在しない。

ではnuxtのビルド設定が良くないのか？と思いしばらく調べていたところ解決策が見つかった。

上記の記事によると「nuxt.config.ts」で「ssr:false」に設定したためnuxt buildではなくnuxt generateを使うべきとの話。

なのでtauriのビルド前に実行されるコマンドをyarn buildからyarn generateに変更。

tauri.config.json

{
  "build": {
    "beforeDevCommand": "yarn dev",
-   "beforeBuildCommand": "yarn build",
+   "beforeBuildCommand": "yarn generate", //buildからgenerateに変更
    "devPath": "http://localhost:3000",
    "distDir": "../dist",
    "withGlobalTauri": true
  },

---省略---

もう一度ビルドを実行し起動してみる。

出来た！

終わりに

今回のテンプレート↓
tauri-nuxt3-tailwind-rome-template