cawa-93 / vite-electron-builder

Secure boilerplate for Electron app based on Vite. TypeScript + Vue/React/Angular/Svelte/Vanilla
MIT License
2.4k stars 261 forks source link

Assets/Images are not shown/broken in production #959

Closed Osiris-Team closed 10 months ago

Osiris-Team commented 1 year ago

Clone the repo and build a production release with the following commands:

npm run build && npx --no-install electron-builder --config .electron-builder.config.js

Run the created .exe from the ./dist/win-unpacked folder.

Notice that logo is broken src="../assets/logo.svg". When in dev tools hovering over the src it shows the full path which is something like file:///FULL_PATH_TO_DIR/win-unpacked/resources/app.asar/packages/renderer/assets/logo.svg, which seems to be right I guess?

Console output ```cmd D:\Coding\JAVASCRIPT\BlueMap-Overview>npm run build && npx --no-install electron-builder --config .electron-builder.config.js > BlueMap-Overview@1.0.2 build > npm run build:main && npm run build:preload && npm run build:renderer > BlueMap-Overview@1.0.2 build:main > cd ./packages/main && vite build vite v4.4.9 building SSR bundle for production... ✓ 5 modules transformed. dist/index.cjs 76.51 kB │ map: 46.15 kB ✓ built in 240ms > BlueMap-Overview@1.0.2 build:preload > cd ./packages/preload && vite build vite v4.4.9 building SSR bundle for production... ✓ 6 modules transformed. dist/index.cjs 41.31 kB │ map: 28.91 kB ✓ built in 187ms > BlueMap-Overview@1.0.2 build:renderer > cd ./packages/renderer && vite build vite v4.4.9 building for production... ✓ 17 modules transformed. dist/index.html 0.46 kB dist/index-b30739d2.css 1.17 kB dist/index-c1208f90.js 55.07 kB │ map: 466.93 kB ✓ built in 1.44s • electron-builder version=24.6.4 os=10.0.19045 • loaded configuration file=D:\Coding\JAVASCRIPT\BlueMap-Overview\.electron-builder.config.js • writing effective config file=dist\builder-effective-config.yaml • packaging platform=win32 arch=x64 electron=26.2.0 appOutDir=dist\win-unpacked • building target=nsis file=dist\BlueMap-Overview Setup 1.0.2.exe archs=x64 oneClick=true perMachine=false • building block map blockMapFile=dist\BlueMap-Overview Setup 1.0.2.exe.blockmap PS D:\Coding\JAVASCRIPT\BlueMap-Overview> ```

Edit: After disabling .asar I saw that the images were not being included in the production build?

Osiris-Team commented 1 year ago

I fixed this by modifying the .electron-builder.config.js

    files: ['packages/**/dist/**', 'packages/**/assets/**'],