はじめに
Electron とVue でデスクトップアプリを作る際、CSSなどで指定したファイルパスは、Electron-builderでビルド時に、自動的に絶対パス（app://）で出力されてしまいますが、絶対パスではなく、相対パスにしたい、という時の方法です。IDEはJetBrain社のWebStormを使っています。
環境
- Vue : 3.2.13
- electron : 13.0.0
- vue/cli : 5.0.4
- vue-cli-plugin-electron-builder : 2.1.1
方法
vue/cliで、VueとElectron-builderが入っている状態とします。
package.jsonファイルと同じ階層にvue.config.jsファイルを作成します。
作成したファイルに以下の記述を追加します。
vue.config.js
module.exports = {
pluginOptions : {
electronBuilder : {
customFileProtocol : "./"
}
}
}
僕はこの方法で、ビルド後のパスにapp://が付かなくなりました。