オープンソースの情報をわかりやすく
ビルドのコマンドは以下の通りです。
package.jsonに記載があります。
yarn build:web
ビルドされたソースはdis/webに作られます。
ただこのままだと
Uncaught ReferenceError: process is not defined
が発生します。
動作に問題はないのですが、不要なエラーが出ているのが気になるところです。
解決方法としてはindex.htmlの以下の部分を削除します。
参考：
https://github.com/SimulatedGREG/electron-vue/issues/195
解決策は提示されてますが、electron用のテンプレートなので、特に対応しようという感じではないようですね。
開発時は思ったのだけれど、ビルドしたらスムーズに動作しました。
プロダクション環境で問題ないかも定期的に確認したほうが良さそうです。
素晴らしいドキュメントがあったので、忘れないようにメモ
https://github.com/SimulatedGREG/electron-vue/blob/99f044896bf3add09d072e9f278ef9d8380337f4/docs/ja/savingreading-local-files.md
this.$electron.shell.openExternal('https://yahoo.co.jp')
this.$electron.remote.getCurrentWindow().close()
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です。
パッケージを入れるたびに行う必要があります。
相対パスで設定すること。
background-image: url('static/img/background.png');
開発中は問題になりませんが、ビルドした後に/が付いているということでリソースが読み込めないエラーが発生します。
このこと自体にはすぐに気づいて修正したのですが、キャッシュ？のようなものが効いていたのか、ローカルの環境でエラーが出て難儀しました。
タイトルのままですが、vue-electronでkeyupが使えませんでした。
何か方法があるのか、それともElectronの機能を使わないといけないのかもしれません。
マウスでの操作は受け付けたいが、スクロールバーの表示を消したいというときに使えます。
::-webkit-scrollbar {
display: none;
}
Electronでデスクトップアプリを作っていると、スクロールバーによって画面サイズが少し小さくなってしまいます。
微々たることですが、それによって画面デザインが損なわれることがあります。
現象はそのままですが、Mac作成した.appは動いて.exeが動かなかった時のメモです。
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
無事インストールができたら、動作確認したいプロジェクトでパッケージをインストールします。
npm i
中途半端にトライしてこけてしまった場合は一度rebuildします。
npm rebuild
vue-electronでは先にnpm run devでサーバを立ち上げておく必要があります。
npm run dev
ここで依存関係などが間違っている場合、
npm install --save something-package-name
と表示されます。
同じように１から環境を作る時にはまりますので、更新したpackage.jsonを保存しておきましょう。
ウェブブラウザで動作確認ができたらelectronを起動します。
electron .
起動に時間がかかる場合があるので、焦らず10秒ぐらい待ってみます。
ここまで動作確認ができたらパッケージングも問題なさそうです。
疑ってみたものとして、Electronとnodeのバージョンでしたが、全く関係ありませんでした。
また一度electron .で起動しておかないとパッケージングしても白い画面のままでした。
開発している次々とパッケージを入れたりして、どんどん環境が汚れていきます。
（正確に把握していれば問題ないのでしょうが）
キリの良いところで一回プロジェクトを削除してみて、全く同じ環境が作れるかチェックしてみるといいと思いました。