Assets (e.g. SVG images and font files) are not being loaded correctly in built version of app using 3.0.0-alpha release

Describe the bug I’m including font files and images that are stored in src/assets/img and src/assets/fonts. They are loading and displaying correctly when I npm run electron:serve, but not when I build the app (npm run electron:build).

The issue is the same using versions 3.0.0-alpha.1 and 3.0.0-alpha.3. The issue is not present in versions 2.x

PNG images are loading correctly - but not .svg, or font files (.woff2, .woff, and .ttf)

To Reproduce Steps to reproduce the behavior:

• install new alpha version following instructions here: https://bestofvue.com/repo/nklayman-vue-cli-plugin-electron-builder-vuejs-vue-cli-3-plugins#releases
• Add an SVG image in src/assets/img and include it in the App.vue file, e.g.:

<img src="../assets/img/an-image.svg" >

• build app using npm run electron:build
• install / open the built application
• observe that the image file does not display correctly, instead there is a placeholder like this:

Expected behavior Images and fonts should load

Environment (please complete the following information): Environment Info:

System: OS: macOS 12.1 CPU: (10) arm64 Apple M1 Pro Binaries: Node: 16.13.1 - /opt/homebrew/bin/node Yarn: 1.22.17 - /opt/homebrew/bin/yarn npm: 8.1.2 - /opt/homebrew/bin/npm Browsers: Chrome: 97.0.4692.71 Edge: Not Found Firefox: 95.0.2 Safari: 15.2 npmPackages: @vue/babel-helper-vue-jsx-merge-props: 1.2.1 @vue/babel-helper-vue-transform-on: 1.0.2 @vue/babel-plugin-jsx: 1.1.1 @vue/babel-plugin-transform-vue-jsx: 1.2.1 @vue/babel-preset-app: 5.0.0-rc.2 @vue/babel-preset-jsx: 1.2.4 @vue/babel-sugar-composition-api-inject-h: 1.2.1 @vue/babel-sugar-composition-api-render-instance: 1.2.4 @vue/babel-sugar-functional-vue: 1.2.2 @vue/babel-sugar-inject-h: 1.2.2 @vue/babel-sugar-v-model: 1.2.3 @vue/babel-sugar-v-on: 1.2.3 @vue/cli-overlay: 5.0.0-rc.2 @vue/cli-plugin-babel: ~5.0.0-rc.2 => 5.0.0-rc.2 @vue/cli-plugin-eslint: ~5.0.0-rc.2 => 5.0.0-rc.2 @vue/cli-plugin-router: ~5.0.0-rc.2 => 5.0.0-rc.2 @vue/cli-plugin-unit-jest: ~5.0.0-rc.2 => 5.0.0-rc.2 @vue/cli-plugin-vuex: ~5.0.0-rc.2 => 5.0.0-rc.2 @vue/cli-service: ~5.0.0-rc.2 => 5.0.0-rc.2 @vue/cli-shared-utils: 5.0.0-rc.2 @vue/component-compiler-utils: 3.3.0 @vue/eslint-config-airbnb: ^6.0.0 => 6.0.0 @vue/test-utils: ^1.1.3 => 1.3.0 @vue/vue2-jest: ^27.0.0-alpha.2 => 27.0.0-alpha.4 @vue/web-component-wrapper: 1.3.0 eslint-plugin-vue: ^8.0.3 => 8.3.0 eslint-plugin-vuejs-accessibility: ^1.1.0 => 1.1.1 jest-serializer-vue: 2.0.2 vue: ^2.6.14 => 2.6.14 vue-cli-plugin-electron-builder: ^3.0.0-alpha.3 => 3.0.0-alpha.3 vue-eslint-parser: 8.0.1 vue-hot-reload-api: 2.3.4 vue-loader: 17.0.0 (15.9.8) vue-router: ^3.5.1 => 3.5.3 vue-style-loader: 4.1.3 vue-template-compiler: ^2.6.14 => 2.6.14 vue-template-es2015-compiler: 1.9.1 vuex: ^3.6.2 => 3.6.2 npmGlobalPackages: @vue/cli: 5.0.0-rc.2

[vangork]

My temp workaround is to change Electron Builder config to customFileProtocol: './'. and win.loadURL(file://${__dirname}/index.html). Not sure if there is any side effect.

[mrbuds]

I had same issue but only with fonts (working on dev, not on build) customFileProtocol: './' fixed it, thanks @vangork

edit: i’m using 3.0.0-alpha.4