VueアプリをEXEする方法

準備するもの

・Vueアプリ

・npm

イントロ

今回はVueアプリをデスクトップアプリとして使えるようにするためにElectronJSを使います。

以前もElectronJSを紹介したことがありますが、何かしらの理由でVueのクライアントアプリをネットに公開したくない場合や、ローカルのPCからAPIにアクセスできるアプリを作成したい時に最適です。

準備

では、Vueのアプリを準備しましょう。まっさらな状態から作成する場合はVue cliやViteを使ってVueアプリを作成してもらって構いません。

もし、実際のアプリケーションで参考にしてみたい場合はこちらを使ってください。

https://github.com/TraitOtaku/VueApp/tree/4_AuthReady
git clone <URL>

cd /path/to/repo/

git branch -a

git checkout 4_AuthReady
npm i

npm run serve

とりあえずアプリが起動できるところまで確認してください。

バックエンドのDjangoのAPIもこちらからどうぞ。

https://github.com/TraitOtaku/djangoAPI/tree/8_AuthReady

ElectronJSのインストール

今回はVue-Electron Builderを使ってVue CLIのコマンドでElectronをインストールしていきます。

公式サイトをチェックしましょう。

https://nklayman.github.io/vue-cli-plugin-electron-builder/

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がこんな感じになります。

http://localhost:8080/#/

これはSEO対策としては悪いのでEXE化するときだけに変更するように覚えておいてください。

これをしないとElectronアプリが白い画面しか表示されないエラーが発生します。

APIフェッチがビルドの時だけエラーになる

ではElectron:Buildのコマンドでログイン画面に入ろうとしてもAxiosがNetworkエラーでログインできないことがあります。

さらに、Djangoのアプリ側では200で返ってくるので謎の現象のように見えます。

これはElectronアプリのセキュリティをCORSのヘッダーのエラーにより発生しています。

まずは、backend.jsのwebSecurityをfalseにします。

※注意!

これはあくまでも検証用として記載しております。

実際にプロダクションにする場合はより安全なやり方が下記のブログで紹介されているので参考にどうぞ。

https://pratikpc.medium.com/bypassing-cors-with-electron-ab7eaf331605
const win = new BrowserWindow({

    webPreferences: {

        webSecurity: false

    }

});

これで問題なくElectronからもAxiosが使えるようになりました。

お疲れ様です。