Nuxt3(RC)アプリをElectronで表示する

はじめに

Nuxt3の勉強がてら、electronアプリで表示するための設定を調べた。 オフラインのデスクトップアプリで使うので、CSR(Client-Side-Rendering)でしてみた。

留意事項

2022/7/18時点では、Static Hosting(静的ホスティング)はまだ試験段階。

This feature is still experimental and under development for Nuxt 3. Full static is not yet implemented but will be in a near future.

出典: https://v3.nuxtjs.org/guide/deploy/static-hosting/

環境情報

• nuxt: 3.0.0-rc.5
• node: 16.14.0
• os: macOS 12.4

Nuxt+Electronアプリの構成

skysan87.hatenablog.com

ビルド設定

デフォルト設定は絶対パスになっており、electronを起動するとこうなる。

Failed to load resource: net::ERR_FILE_NOT_FOUND

したがって、baseURLを相対パスに変更する。

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

console.log('NODE_ENV:', process.env.NODE_ENV)

const isPrd = process.env.NODE_ENV === 'production'

export default defineNuxtConfig({
  ssr: false,
  app: {
    baseURL: isPrd ? './' : '/'
  }
})

ただし、開発環境(NODE_ENV: development)では、WARNINGが出るので、デフォルト値(/)に戻す。

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

ビルド

nuxiで生成されたプロジェクトに記載されたビルド系コマンドはNuxt2と同じなので、そのまま使用

# Static Hostingビルド
$ nuxt build && nuxt generate

以上。