elecrton-vueでweb用にbuildする

ビルドのコマンドは以下の通りです。
package.jsonに記載があります。

yarn build:web

ビルドされたソースはdis/webに作られます。

ただこのままだと

Uncaught ReferenceError: process is not defined

が発生します。

動作に問題はないのですが、不要なエラーが出ているのが気になるところです。

解決方法としてはindex.htmlの以下の部分を削除します。


参考:
https://github.com/SimulatedGREG/electron-vue/issues/195

解決策は提示されてますが、electron用のテンプレートなので、特に対応しようという感じではないようですね。

electron-vueでnedbを使用する

素晴らしいドキュメントがあったので、忘れないようにメモ

https://github.com/SimulatedGREG/electron-vue/blob/99f044896bf3add09d072e9f278ef9d8380337f4/docs/ja/savingreading-local-files.md

Electronでネイティブモジュールをインストールする

ElectronでCamanJSを試そうとしたら次のようなエラーが発生しました。
(一部省略してます)

...was compiled against a different Node.js version using
NODE_MODULE_VERSION xx. This version of Node.js requires
NODE_MODULE_VERSION xx. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or`npm install`).

どうやらビルドしているNodeのバージョンが違うらしく、エラーの指示通り再ビルドを行いますが、うまくいきません。

最初はElectronのエラーだとは思ってなかったのですが、調べてみると次のようなドキュメントがありました。

https://electronjs.org/docs/tutorial/using-native-node-modules

手順としては以下の通り。

yarn add electron-rebuild
yarn 
./node_modules/.bin/electron-rebuild

肝は./node_modules/.bin/electron-rebuildです。

パッケージを入れるたびに行う必要があります。

vue-electronのassetsのパスについて

相対パスで設定すること。

background-image: url('static/img/background.png');

開発中は問題になりませんが、ビルドした後に/が付いているということでリソースが読み込めないエラーが発生します。

このこと自体にはすぐに気づいて修正したのですが、キャッシュ?のようなものが効いていたのか、ローカルの環境でエラーが出て難儀しました。

vue-electronでkeyupが使えない

タイトルのままですが、vue-electronでkeyupが使えませんでした。
何か方法があるのか、それともElectronの機能を使わないといけないのかもしれません。

Electronでスクロールバーを非表示にする

マウスでの操作は受け付けたいが、スクロールバーの表示を消したいというときに使えます。

::-webkit-scrollbar {
  display: none;
}

Electronでデスクトップアプリを作っていると、スクロールバーによって画面サイズが少し小さくなってしまいます。

微々たることですが、それによって画面デザインが損なわれることがあります。

MacでパッケージしたWindowsアプリが白い画面で止まる時

現象はそのままですが、Mac作成した.appは動いて.exeが動かなかった時のメモです。

Windowsで開発環境を作ってみる

nodeはすでに入っているという前提です。

パッケージングする前にelectron .コマンドで画面が見れるかも怪しかったので、Windowsでも開発環境を作成しました。

今回のプロジェクトはvue-electronを使っていたので、GithubのAre you a Windows User?を参考にしました。

https://github.com/SimulatedGREG/electron-vue

こちらにそのWindowsでの開発環境構築方法が載っています。
https://simulatedgreg.gitbooks.io/electron-vue/content/en/getting_started.html#a-note-for-windows-users

まずはPowerShellを開いて次のコマンドを打ちます。

Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force

次にこれ。

npm install --global --production npm-windows-upgrade
npm-windows-upgrade

Windowでnpm installをするとエラーがでます。
それを解消するツールです。

npm install --global --production windows-build-tools

Electronの動作確認

無事インストールができたら、動作確認したいプロジェクトでパッケージをインストールします。

npm i

中途半端にトライしてこけてしまった場合は一度rebuildします。

npm rebuild

vue-electronでは先にnpm run devでサーバを立ち上げておく必要があります。

npm run dev

ここで依存関係などが間違っている場合、

npm install --save something-package-name

と表示されます。

同じように1から環境を作る時にはまりますので、更新したpackage.jsonを保存しておきましょう。

ウェブブラウザで動作確認ができたらelectronを起動します。

electron .

起動に時間がかかる場合があるので、焦らず10秒ぐらい待ってみます。

ここまで動作確認ができたらパッケージングも問題なさそうです。

疑ってみたものとして、Electronとnodeのバージョンでしたが、全く関係ありませんでした。

また一度electron .で起動しておかないとパッケージングしても白い画面のままでした。

今回の教訓

開発している次々とパッケージを入れたりして、どんどん環境が汚れていきます。
(正確に把握していれば問題ないのでしょうが)

キリの良いところで一回プロジェクトを削除してみて、全く同じ環境が作れるかチェックしてみるといいと思いました。