What is the correct path of "renderer/public"? about electron-vue-template

[Deluze]

Interesting, looking at your build directory it should find the 404.png on /404.png.

What is being logged to the console? Are you getting a 404 from the network?
Did you modify electron-builder.json config?

Path looks fine to me, why do you think it's strange?

[Deluze]

I tried this on my Windows & Mac system to be sure, but can't seem to reproduce.

[immafrady]

I'm sorry for being busy and then forgot to reply.🥵

I've cloned a new project and try to reproduce the problem, and it seems ok.

I need to find the difference between your project and mine.

Thanks anyway😌

[dss886]

@Deluze hi, I got the same problem.

I have a google.png image in the src/renderer/public/ dir, and using it like /google.png in my vue file.

Everything works fine when in develop mode, but got an error when build to zip on Windows.

The /google.png seems to be directed to the root directory like file:///D:/google.png (while my program is unpacked to the D:/Software/xxx).

Any help would be greatly appreciated!

[Deluze]

Hey @dss886, what's your Vite config like? The default svg icons that come with this project work fine on my end.

What commands are you running?

[dss886]

@Deluze Hey,

vite.config.js:

const Path = require("path");
const vuePlugin = require("@vitejs/plugin-vue");

const { defineConfig } = require("vite");

/**
 * https://vitejs.dev/config
 */
const config = defineConfig({
    root: Path.join(__dirname, "src", "renderer"),
    publicDir: "public",
    server: {
        port: 8080,
    },
    open: false,
    build: {
        outDir: Path.join(__dirname, "build", "renderer"),
        emptyOutDir: true,
        rollupOptions: {
            input: {
                main: Path.join(__dirname, "src", "renderer", "index.html"),
                hardware: Path.join(__dirname, "src", "renderer", "plugins", "hardware", "index.html"),
                spotlight: Path.join(__dirname, "src", "renderer", "plugins", "spotlight", "index.html"),
            }
        }
    },
    plugins: [vuePlugin()],
});

module.exports = config;

Build Command: node scripts/build.js && electron-builder --win zip:x64

Build result is a zip file. After unzip is like:

Unzip the app.asar file:

[Deluze]

@dss886 The directory tree in your last screenshot looks correct. Vite's behavior is to pull any file from the public dir into the build root (which is renderer).

I tried to reproduce it on my Linux environment by packing up the build in a tar, deb and snap package but can't seem to reproduce.

Could you create a minimal repo to reproduce this issue? @dss886
I'll try it on my Windows environment at a later time.

[dss886]

Hi @Deluze, I found the problem, but haven't solved it yet.

I have a vue component named ListItem, which accept props like:

interface Props {
    icon: string;
    title: string;
    subtitle?: string;
}
withDefaults(defineProps<Props>(), {
    icon: "",
    title: "",
    subtitle: "",
});

App.vue pass the name of icon to the ListItem component:

<ListItem 
  v-for="(item, index) in itemList"
  :key="item.title"
  :icon="item.icon" 
  :title="item.title" 
/>

But the item.icon is the filename of images in public directory (like 'google.png'), and I concat the src attribute of manually, which is the problem:

<img 
    v-if="icon !== ''" 
    :src="'/' + icon"
    class="icon"
>

I tried removing string concat and passing the /google.png directly, but didn’t work either. It seems that the src only written directly in the vue file can be converted correctly.

Do you have any suggestions? 😨

PS: You may want to check the minimal bug repo: https://github.com/dss886/electron-vue-troubleshooting

[Deluze]

Thanks @dss886 I'll take a look this weekend

[tob-at-lovelace]

Hi all. Maybe this is unrelated, but I was hitting this exact problem with code that I was porting over.

I'm using this template with Vuetify. I just cloned this template and added Vuetify, as described here.

At that point if you just try a trivial change to App.vue you can experience this firsthand. I added a single Vuetify image:

<template>
  <v-app>
    <v-img :width="60" src="/vue.svg"></v-img>
    <div>
      <a href="https://vitejs.dev" target="_blank">
        <img src="/logomark_white.png" class="logo" alt="Vite logo" />
      </a>
      <a href="https://vuejs.org/" target="_blank">
        <img src="/vue.svg" class="logo vue" alt="Vue logo" />
      </a>
    </div>
    <HelloWorld msg="Vite + Vue" />
  </v-app>
</template>

So this code is in the same file, using the same image, as the code that works. The above will work with an npm run dev but if you build it with npm run build the resulting binary won't draw the Vuetify image.

Thanks to running into something similar in the past, I tried changing the file path from /vue.svg to ./vue.svg and it works as expected.

Maybe this will help someone else who happens upon this thread.