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

Table of Contents

ElectronのPackaging

Packagingはelectron-builderを使います。

インストール

$ npm i -D electron-builder
+ [email protected]

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 devやnpm 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できるよう修正する方法を紹介しました。

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