Electron + Vue tray wrong icon path - vue.js

Question

I'm trying to create a Windows applications using Electron and Vue. I want to send the application to the Tray and show an icon to maximize it again when clicked. It works fine in DEV but when I build the app, the Tray icon is not working.
The app it's executing, but when minimized the tray is not showing and there is not option to open it again (need to kill the process).
This is the code I'm trying to use:
app.on("ready", async () => {
if (isDevelopment && !process.env.IS_TEST) {
try {
await installExtension(VUEJS_DEVTOOLS);
} catch (e) {
console.error("Vue Devtools failed to install:", e.toString());
}
}
createWindow();
createTray()
});
const createTray = () => {
const tray = new Tray(resolve(process.resourcesPath, '\\resources\\homeico.ico'))
const contextMenu = Menu.buildFromTemplate([
{
label: 'Show App', click: function () {
app.show()
}
},
{
label: 'Quit', click: function () {
app.isQuiting = true
app.quit()
}
}
])
tray.setToolTip('This is my application.')
tray.setContextMenu(contextMenu)
tray.on('click', () => {
console.log('clicked')
})
}
And in my vue.config.js:
pluginOptions: {
electronBuilder: {
nodeIntegration: true,
builderOptions: {
"extraResources": [
{
"from": "extraResources",
"to": "resources",
"filter": [
"**/*"
]
}
]
}
},
},
The resolve(process.resourcesPath, '\resources\homeico.ico') line is pointing to a existing file, I'm printing this route in the App and I can open it in my Windows Explorer, but when I want to show the Image in the app, I can see next error in the DevTools:
Not allowed to load local resource: file:///C:/Users/mysUser/AppData/Local/Programs/business-config-tool/resources/resources/homeico.ico
The path is accesible, but not in the App.
What's the correct way to configure the path to the icon? there is another path I can configure for assets? I also tried with __dirname and other icon formats (ico, png..)
Thank you.

Answer 1

I ran into the same issue. I searched for a solution for hours, and I finally found one.
This solution is made for app using electron-vue (I personally used this Vue Cli electron plugin). And I tested it on Windows only.
The Tray must be initialised with an icon Path, wich needs be different wether you are running a built version of your app (yarn electron:build), or serving your app (yarn electron:serve).
I am using a function that I called isServeMode, wich basically tells me if I am using the serve mode or the buid mode. Here is what the function looks like :
// utils.js file
const isServeMode = () => {
return process.env.WEBPACK_DEV_SERVER_URL
}
You don't need to create this function, but it might be usefull somewhere else in your app so I suggest you to put it in a file that you can import from anywhere in your app. In my case, I created a utils.js file where I write those functions.
Then, put your tray icon in the public folder, it can not work if you put the icon in the src/assets folder, since we have to access it from the Node environnement and not from Vue. In my case, I put my icon in public/tray/icon.png.
Finally, we can use the electron Tray with Electron vue like this
import { Tray } from "electron"
import path from "path"
import { isServeMode } from "./utils" // Path depends on where you wrote your function
// Some Electron code...
let tray
createTray = () => {
const iconPath = isServeMode()
? path.join(__dirname, "/bundled/tray/icon.png")
: path.join(__dirname, "/tray/icon.png")
tray = new Tray(iconPath)
}
I will soon release a new version of my Unlighter app, wich is an electron-vue app that will include a Tray example. Feel free to take a look at this "real world app example" if you're interested.