windows10 Electron-Nuxt.jsでjsonファイルを利用して、通知を行う

windows10 Electron-Nuxt.jsでjsonファイルを利用して、通知を行う

Electron-Nuxt.jsでaxiosを利用して、jsonファイルを読み込み、通知などを行うサンプルコード

環境

  • OS  windows10 pro
  • node V10.16.3
  • npm 6.9.0
  • Electron 6.0.12
  • nuxt-buefy 0.3.19
  • @nuxtjs/axios 5.9.0

※Electron-Nuxt.jsの環境構築手順はこちら

axiosとbuefyインストール

axiosとbuefyを利用するのでインストールしておく

プロジェクト配下のnuxt.config.jsにmodulesにaxiosとnuxt-buefyを追加しておきます。

jsonファイルを読み込むサンプルコード

セキュリティ上よろしくないですが、とりあえず プロジェクト配下のmain.jsの electron.BrowserWindowを下記のように編集します。

win.maximize()もサイズを指定しているのでコメントアウトしておく

次にlayoutsフォルダ配下のdefult.vueを下記のように編集

※src=””の画像は好きなものを設定して下さい

pagesフォルダ配下にnews.vueを下記の内容で作成します。

system.jsonというファイルを作成し、接続するサーバーにアップしておきます。

作成できれば起動してみます。

通知をクリックするとクライアントマシンを取得できていることが確認できます。

buildしてみる

最後にビルドしてexeファイルを作成してみます

buildするとdistフォルダが作成されて、配下にexeファイルが作成されます。

追記

起動すると下記のエラー(Cannot GET)が発生しました。

原因は、 nuxt.config.jsで@nuxtjs/axiosを利用していたためで、

なのでaxiosを利用します。まずはインストールを行います。

次に nuxt.config.jsの@nuxtjs/axios をコメントアウトか削除し、pages配下のnews.vueのscript部を下記のように編集します。

再度ビルドすると正常に起動します。