Electronでvue-cli-service buildしたindex.htmlを読みこんだら躓いた話

概要

とりあえずElectronを触ってみたくなったので、vue uiでプロジェクトを作成して
yarn run buildしたものを読み込むようにしてelectron .で
起動してみたところ以下みたいに真っ白の画面が表示されてしまった…

なぜこうなったのか

Devtoolを起動してソースコードを覗いてみたところ

読み込んでいるbundleしたjsのパスが/js/chunk...のようになってしまっていて、読み込めていないようであった

解決策

Add baseUrl option in vue-cli-service build command · Issue #1623 · vuejs/vue-cli

vue.config.jsというファイルを作成し以下のように記載すると、build時のbaseUrlを変更できる。

vue.config.js

module.exports = {
  baseUrl: './'
}

作成後、yarn run buildしなおしてelectron .して見ると、無事vue.jsのサンプルページが表示された。