以前に執筆した記事の内容ではElectronのPackagingができませんでした。
本記事ではその対応を紹介します。

本記事では問題の原因についてほとんど触れていません。
これは私が原因を理解できていないためです。誤解を招くため推測も載せていません。

本来は原因を含めての対策としたいのですが、Packagingのときのみに発生する事象であるため解決策の周知を優先させていただきました🙇

Table of Contents

ElectronのPackaging

Packagingはelectron-builderを使います。

インストール

$ npm i -D electron-builder
+ electron-builder@22.3.2

package.jsonの設定

package:testは動作確認用です。
実際にリリースするときはpackageを使います。

  "scripts": {
    "package": "nuxt build && electron-builder",
    "package:test": "nuxt build && electron-builder --dir",
  }

エントリポイントが指定されていないため、main.jsを指定します。

  "main": "main.js",

問題について

以前に執筆した記事は下記です。

この記事通りに実装してPackagingしたアプリケーションを実行すると404エラーが発生します。

npm run devnpm run buildでは動いていたのに..ショッキングです😱

対策

開発時以外はサーバを立ち上げず、fileプロトコルで静的ファイルを参照するようにしました。

下記3ファイルを修正するとPackagingしたアプリケーションが正常に起動するはずです👍

main.jsの修正

以下のように修正します。

 // HTTP server
 const http = require('http')
-const server = http.createServer(nuxt.render)
-server.listen()
-const _NUXT_URL_ = `http://localhost:${server.address().port}`
+let _NUXT_URL_
+
+if (config.dev) {
+  const server = http.createServer(nuxt.render)
+  server.listen()
+  _NUXT_URL_ = `http://localhost:${server.address().port}`
+} else {
+  _NUXT_URL_ = `${__dirname}/dist/index.html`
+}
+
 console.log(`Nuxt working on ${_NUXT_URL_}`)

+
 // Electron
 const electron = require('electron')
 const app = electron.app

nuxt.config.jsの修正

ルーターの設定を追記します。
デフォルトの{ mode: 'history' }では動作しません。

  router: {
    mode: 'hash'
  }

また、build.extend配下にpublicPathの指定を追加します。

  build: {
    .
    .
    extend(config, ctx) {
      config.externals = { sqlite3: 'commonjs sqlite3' }

      // Fileビルドした場合のアクセス用
      config.output.publicPath = './_nuxt/';
    }
  },

package.jsonの修正

build.directories.outputにパッケージの格納先を指定します。

  "build": {
    "directories": {
      "output": "build"
    }
  }

この指定をしないとNot allowed to load local resourceが発生します。

リポジトリ

今回もタグを切っています。
実際のコードが見たい場合はご覧下さい。

総括

過去執筆した記事をベースに、うまくPackagingできるよう修正する方法を紹介しました。

様々な問題の原因、設定の理由がハッキリ理解できていないのは心残りです..😓
それでも困っている方のお役に立てればと思います😄