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 .で起動しておかないとパッケージングしても白い画面のままでした。

今回の教訓

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です