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

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: './'
    }
  }
}

参考

Assets (e.g. SVG images and font files) are not being loaded correctly in built version of app using 3.0.0-alpha release · Issue #1647 · nklayman/vue-cli-plugin-electron-builder

Describe the bug I'm including font files and images that are stored in src/assets/img and src/assets/fonts. They are lo...

github.com