準備するもの
・Vueアプリ
・npm
イントロ
今回はVueアプリをデスクトップアプリとして使えるようにするためにElectronJSを使います。
以前もElectronJSを紹介したことがありますが、何かしらの理由でVueのクライアントアプリをネットに公開したくない場合や、ローカルのPCからAPIにアクセスできるアプリを作成したい時に最適です。
準備
では、Vueのアプリを準備しましょう。まっさらな状態から作成する場合はVue cliやViteを使ってVueアプリを作成してもらって構いません。
もし、実際のアプリケーションで参考にしてみたい場合はこちらを使ってください。
git clone <URL> cd /path/to/repo/ git branch -a git checkout 4_AuthReady
npm i npm run serve
とりあえずアプリが起動できるところまで確認してください。
バックエンドのDjangoのAPIもこちらからどうぞ。
ElectronJSのインストール
今回はVue-Electron Builderを使ってVue CLIのコマンドでElectronをインストールしていきます。
公式サイトをチェックしましょう。
Vue CLIがない人はこのコマンドでVueCLIをインストールしましょう。
npm install -g @vue/cli
ではVueのアプリにElectronを追加します。
vue add electron-builder
デベロプメントサーバーの起動の仕方
Yarnの場合
yarn electron:serve
NPMの場合
npm run electron:serve
アプリをExe化する
Yarnの場合
yarn electron:build
NPMの場合
npm run electron:build
Vue Routerを使っている場合
Vue Routerを使っている場合は下記のような警告が出ます。
It is detected that you are using Vue Router. It must function in hash mode to work in Electron. Learn more at https://goo.gl/GM1xZG
この場合は、router内のindex.jsのCreateWebHistoryをcreateWebHashHistoryに変えてあげましょう。
const router = createRouter({ history: createWebHashHistory(process.env.BASE_URL), routes })
もしくはこのようなやり方でもできます。
const router = createRouter({ history: process.env.IS_ELECTRON ? createWebHashHistory() : createWebHistory(), routes, });
そうするとURLがこんな感じになります。
これはSEO対策としては悪いのでEXE化するときだけに変更するように覚えておいてください。
これをしないとElectronアプリが白い画面しか表示されないエラーが発生します。
APIフェッチがビルドの時だけエラーになる
ではElectron:Buildのコマンドでログイン画面に入ろうとしてもAxiosがNetworkエラーでログインできないことがあります。
さらに、Djangoのアプリ側では200で返ってくるので謎の現象のように見えます。
これはElectronアプリのセキュリティをCORSのヘッダーのエラーにより発生しています。
まずは、backend.jsのwebSecurityをfalseにします。
※注意!
これはあくまでも検証用として記載しております。
実際にプロダクションにする場合はより安全なやり方が下記のブログで紹介されているので参考にどうぞ。
const win = new BrowserWindow({ webPreferences: { webSecurity: false } });
これで問題なくElectronからもAxiosが使えるようになりました。
お疲れ様です。