quasar build -m electron, assets load path incorrect

HotHat commented 1 year ago

What happened?

App window blank. index.xxxx.js and index.xxxx.css can't not load

css path not correct: file:///D:/Programming/Electron/quasar-project/dist/electron/Packaged/win-unpacked/resources/app.asar/index.html/assets/index.91f7b3e6.css

mybe this is the correct path: file:///D:/Programming/Electron/quasar-project/dist/electron/Packaged/win-unpacked/resources/app.asar/assets/index.91f7b3e6.css

What did you expect to happen?

App show the content

Reproduction URL

https://codepen.io/rstoenescu/pen/xxEvBLR

How to reproduce?

I can't now how to reproduce.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

Chrome

Quasar info output

║     assets/IndexPage.e4ad2d38.js │    2.95 KB ║
 ║     assets/LoginPage.f4b2cf88.js │  205.28 KB ║
 ║    assets/MainLayout.f626ef6a.js │  185.67 KB ║
 ║          assets/QBtn.15b0714f.js │  117.36 KB ║
 ║       assets/QLayout.6219c3b3.js │   59.38 KB ║
 ╟──────────────────────────────────┼────────────╢
 ║        assets/index.91f7b3e6.css │  243.32 KB ║
 ║    assets/LoginPage.8b9f19a6.css │    0.08 KB ║
 ╟──────────────────────────────────┼────────────╢
 ║                package-lock.json │  482.80 KB ║
 ║                     package.json │    0.32 KB ║
 ╟──────────────────────────────────┼────────────╢
 ║                       index.html │    0.97 KB ║
 ╚══════════════════════════════════╧════════════╝

 App • Installing UnPackaged folder production dependencies...
 App • [sync] Running "npm install --production" in D:\Programming\Electron\quasar-project\dist\electron\UnPackaged

added 23 packages, and audited 24 packages in 4s

4 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
 App •  WAIT  • Bundling app with electron-builder...
  • electron-builder  version=24.6.3 os=10.0.19045
  • writing effective config  file=dist\electron\Packaged\builder-effective-config.yaml
  • packaging       platform=win32 arch=x64 electron=25.4.0 appOutDir=dist\electron\Packaged\win-unpacked
  • building        target=nsis file=dist\electron\Packaged\Quasar App Setup 0.0.1.exe archs=x64 oneClick=true perMachine=false
  • building block map  blockMapFile=dist\electron\Packaged\Quasar App Setup 0.0.1.exe.blockmap

 App •  DONE  • electron-builder built the app • 169697ms

 Build succeeded

 Build mode............. electron
 Pkg quasar............. v2.12.4
 Pkg @quasar/app-vite... v1.4.3
 Pkg vite............... v2.9.16
 Debugging.............. enabled
 Publishing............. no
 Browser target......... es2019|edge88|firefox78|chrome87|safari13.1
 Node target............ node16
 =======================
 Output folder.......... D:\Programming\Electron\quasar-project\dist\electron

Relevant log output

GET file:///D:/Programming/Electron/quasar-project/dist/electron/Packaged/win-unpacked/resources/app.asar/index.html/assets/index.efaf48f1.js net::ERR_FILE_NOT_FOUND
file:///D:/Programming/Electron/quasar-project/dist/electron/Packaged/win-unpacked/resources/app.asar/index.html/:18     GET file:///D:/Programming/Electron/quasar-project/dist/electron/Packaged/win-unpacked/resources/app.asar/index.html/assets/index.91f7b3e6.css net::ERR_FILE_NOT_FOUND

Additional context

No response

fullmooooon commented 1 year ago

I don't know if this will help you.

Attempt to explicitly load resources in vite project. Make sure your paths are processed by Vite's import. This will ensure that it can be referenced after packaging.

<template>
  <div>
     <img :src="welcome_png" alt="" />
  </div>
</template>

<script setup lang="ts">
import welcome_png from '/src/assets/image/welcome_png.png';
</script>

presiyan-peev commented 11 months ago

@fullmooooon Hi,

I can't find my mistake, as in web images work as expected, but not in electron. I think I read the whole Quasar-Electron documentation. Your advice did not help me either. I tried two different approaches:

<template>
  <img :src="logo" />
</template>
<script setup>
import logo from "../assets/images/logo_text.svg";
// const logo = new URL('../assets/images/logo_text.svg', import.meta.url).href
</script>

When project is built, this is the rendered html: <img data-v-416d72db="" src="assets/logo_text.4fffb5ab.svg" class="q-mx-auto img-logo-big">

This is the file tree that I receive, when I use quasar build -m electron -P always

dist
- electron
- - Packaged
- - - win-unpacked
- - - - locales
- - - - resources
- - - - app.asar
- - - - elevate.exe
- - - - app.exe
- - - - (17 files, .dll, .pak and others)
- - - Setup.exe
- - - (3 more files)
- - UnPackaged
- - - assets
- - - - logo_text.4fffb5ab.svg
- - - - (128 more files, including svg, js and css files)
- - - (4 more folders, including node_modules)
- - - index.html
- - - package.json
- - - package-lock.json
- - - electron-main.js
- - - electron-preload.js (it is empty)

This is my quasar.config.js: `electron: {

  inspectPort: 5858,

  bundler: "builder", // 'packager' or 'builder'

  packager: {
  },

  builder: {
    appId: "vue3app",
  },
},`

As you see, my app.exe is looking for the images in a ./assets folder in the same folder (win-unpackaged), but .assets is in another folder (UnPackaged).

shmulik323 commented 15 hours ago

i think i found some workaround that work but not recommended for production,

you can add this to your builder profile and it will include the assets folder until quasar team will fix the issue

     builder: {
    appId: "vue3app",
    asar: false,
    extraResources: [
        {
            from: './src/assets',
            to: 'app/assets',
        }]
}

quasarframework / quasar