Vue CLI Plugin Electron Builderでビルドしたアプリの画面がブランクになる

Vue + Electron + TypeScriptでアプリをつくるときのエラー対処。

Vue CLI Plugin Electron Builderを導入してビルドしたアプリを実行するとナビゲーションメニューを残して真っ白になった。 これの対処を残します。

環境

  • Windows 10
  • Node.js v14.15.0
  • npm 6.14.8
  • yarn 1.22.5
  • @vue/cli 4.5.9
  • vue-cli-plugin-electron-builder ~2.0.0-rc.5

Vue CLI Plugin Electron Builderでビルドしたアプリの画面がブランクになる

Vue CLI Plugin Electron BuilderのCommon Issuesに載ってました。

Vue Routerのヒストリーモードが原因です。

historyモードはページのリロード無しにURL遷移を実現するhistory.pushStateAPIを使っています。

Electron では完全なURLをhashを使ってシミュレートするhashモードを使う必要がある。

/src/router/index.tsを以下のように修正する。

If using Vue 2:

export default new Router({
- mode: 'history',
+ mode: process.env.IS_ELECTRON ? 'hash' : 'history',
})

If using Vue 3:

-- import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
++ import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from "vue-router";

・・・省略

const router = createRouter({
--  history: createWebHistory(process.env.BASE_URL),
++  history: process.env.IS_ELECTRON
++  ? createWebHashHistory()
++  : createWebHistory(),
})

github

詳しくはVue RouterのHTML5 History モードを参照。

 関連記事

 新着 or 更新記事