electron + vue cliでビルドした時に、fontsourceのフォントが反映されない時の対処

Javascript

2022.05.28

記事内に広告が含まれています。

electronとvue cliで、アプリにfontsourceのフォントを適用したいなというとき、run serveではフォントが適用されるのですが、buildするとフォントが適用されない時の対処を記事にします。

前提
事象
対処
参考

前提

vue-cli-plugin-electron-builder: 2.1.1
electron: 13

事象

ビルドしたアプリのコンソールにFailed to load resource: net::ERR_FAILEDと表示され、フォントが適用されない。

対処

vue.config.jsで、customFileProtocol: './'を設定する。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  pluginOptions: {
    electronBuilder: {
      customFileProtocol: './'
    }
  }
}

参考

nklayman/vue-cli-plugin-electron-builder

Easily Build Your Vue.js App For Desktop With Electron - nklayman/vue-cli-plugin-electron-builder