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.
@/assets/img/whatever.pngit 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.