0

I'm starting to study Electron and lately I've been having problems with static file references after building an application. I've tried a lot of things and none of them have worked.

My project structure is similar to:

/my-project
  /public
  /src
    /components
    /assets
      /img
        image.png
    /views
    /App.vue
    /main.js
  /electron.js
  /vue.config.js

When I start the application I get the message: Failed to load resource: net::ERR_FILE_NOT_FOUND Source of the running application

In the same way I get other errors when trying to access other routes in the application, like this one

My build (config) is configured like this:

"build": {
        "appId": "com.gerenciapet.app",
        "productName": "GerenciaPet",
        "directories": {
            "output": "build_electron"
        },
        "files": [
            "dist/**/*",
            "main.js",
            "preload.js",
            "database.db",
            "!dist/**/*.map"
        ],
        "extraResources": [
            "src/assets/**/*"
        ],
        "win": {
            "icon": "public/favicon.ico",
            "target": "nsis"
        },
        "nsis": {
            "oneClick": false,
            "perMachine": true,
            "allowElevation": true,
            "allowToChangeInstallationDirectory": true,
            "createDesktopShortcut": true,
            "createStartMenuShortcut": true
        }
    }

My vue.config.json looks like this:

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
    assetsDir: "assets",
    outputDir: "dist",
    filenameHashing: false,
    transpileDependencies: true,
});

My electron.js file is loading the index file like this:

mainWindow.loadFile(path.join(__dirname, "dist", "index.html"));

And I'm importing the image to use like this:

import mainImage from '@/assets/img/cat-astronaut-amico.png';

I've tried literally everything, I've changed all the paths, I've tried modifying the vue and electron paths, changing the folder names, clearing the cache, removing/adding asar, among others.

2
  • I'm struggling to reproduce this issue when using the same electron-builder and Vue config. Seems like some assets are not getting bundled correctly during the Vue production build. But when I import e.g. @/assets/img/whatever.png it ends up in dist/img (or gets inlined as a data URL) where Electron picks it up as expected. If this is just a study project, consider publishing the sources to help others reproduce the issue. Commented Dec 30, 2024 at 17:26
  • 1
    @mwopitz You can find the project source code here: github.com/henrilima/gerenciapet. Feel free to check it out and let me know if you find anything. Thank you in advance. Commented Dec 31, 2024 at 4:36

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.