Nieprawidłowe ścieżki do czcionek w pliku css w wersji produkcyjnej (Electron, Vue, Webpack)

Question

Po zbudowaniu aplikacji, czcionki się nie wczytują z powodu nieprawidłowych ścieżek: np. w pliku css url do czcionki wygląda ''app:///fonts/Saira-Regular.579c1ad5.ttf" a powinno być "app://./fonts/Saira-Regular.579c1ad5.ttf" ( jest "///" zamiast "//./"). Co ciekawe problem nie występuje w pliku html, pliki css i js mają prawidłowe ścieżki, tylko w css podczas używania url() ścieżka się psuje.

Na dev problem nie występuje..

Załączam link do commita w którym występował ten problem: https://github.com/vxidfunctixn/Diary/tree/c6d80cfa59490f19500d72758080cdcf13656af6

Answer 1

Udało mi się znaleźć rozwiązanie tutaj: https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/1647 

W pliku vue.config.js należy dodać pod configureWebpack następujący kod:

pluginOptions: {
  electronBuilder: {
    customFileProtocol: './'
  }
}

Sprawi to, że adresy url w pliku css staną się relatywne "../fonts/Saira-Regular.579c1ad5.ttf" co rozwiązuje problem i czcionki są wczytywane poprawnie.

Niemniej, nadal nie rozumiem z czego wynikał problem, więc zostawiam pytanie otwarte.