can't find the right file path

[zzxdt]

in developer environment, my project is no issue,
this is my electron Tray
app.whenReady().then(() => {
let pathyuki: string
let homeyuki: string
let exityuiki: string
if (Constants.IS_DEV_ENV) {
pathyuki = path.join(__dirname, '../../src/renderer/public/images/whiteyuki.png')
homeyuki = path.join(__dirname, '../../src/renderer/public/images/home.png')
exityuiki = path.join(__dirname, '../../src/renderer/public/images/exit.png')
} else {
pathyuki = path.join(process.resourcesPath, 'app.asar/src/renderer/public/images/whiteyuki.png')
homeyuki = path.join(process.resourcesPath, 'app.asar/src/renderer/public/images/home.png')
exityuiki = path.join(process.resourcesPath, 'app.asar/src/renderer/public/images/exit.png')
}
let tray = new Tray(pathyuki)
const contextMenu = Menu.buildFromTemplate([
{
label: '打开主界面',
icon: homeyuki,
click: function () {
mainWindow.show()
}
},
{
label: '退出',
icon: exityuiki,
click: function () {
app.quit()
}
}
])
tray.setToolTip('YuKiGalGamePro')
tray.setTitle('YuKiGalGamePro')
tray.setContextMenu(contextMenu)
tray.on('click', () => {
mainWindow.show()
})
})
i set the png as icon
this is my image file:

but when i use npm run build:win i try to run it,the image is fade!
this is my tsconfig.json:
{
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist",
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"jsx": "preserve",
"allowJs": true,
"noImplicitAny": false,
"allowSyntheticDefaultImports": true,
"declaration": false,
"resolveJsonModule": true,
"esModuleInterop": true,
"sourceMap": true,
"strict": true,
"skipLibCheck": true,
"typeRoots": ["./node_modules/@types", "./src/types"],
"types": ["node", "debug"],
"paths": {
"@/": ["./src/"]
},
"lib": ["esnext", "dom"]
},
"include": [
"src//",
"package.json",
"vite.config.ts",
"buildAssets/builder",
"src/renderer/locales/.json"
],
"exclude": ["node_modules", "/*.spec.ts"]
}
and vite.config.ts:
import { fileURLToPath, URL } from 'url'
import { defineConfig, loadEnv } from 'vite'
import ElectronPlugin, { ElectronOptions } from 'vite-plugin-electron'
import RendererPlugin from 'vite-plugin-electron-renderer'
import VuetifyPlugin from 'vite-plugin-vuetify'
import VueJsx from '@vitejs/plugin-vue-jsx'
import Vue from '@vitejs/plugin-vue'
import EslintPlugin from 'vite-plugin-eslint'
import { rmSync } from 'fs'
import { resolve, dirname } from 'path'
import { builtinModules } from 'module'
const isDevEnv = process.env.NODE_ENV === 'development'

export default defineConfig(({ mode }) => {
process.env = {
...(isDevEnv
? {
ELECTRON_ENABLE_LOGGING: 'true'
}
: {}),
...process.env,
...loadEnv(mode, process.cwd())
}

rmSync('dist', { recursive: true, force: true })

const electronPluginConfigs: ElectronOptions[] = [
{
entry: 'src/main/index.ts',
onstart({ startup }) {
startup()
},
vite: {
build: {
assetsDir: '.',
outDir: 'dist/main',
rollupOptions: {
plugins: [
require('@rollup/plugin-alias')({
entries: [{ find: '@', replacement: resolve(__dirname, 'src') }]
})
],
external: ['electron', ...builtinModules, 'koffi']
}
}
}
},
{
entry: 'src/preload/index.ts',
onstart({ reload }) {
reload()
},
vite: {
resolve: {
alias: {
'@': resolve(dirname(fileURLToPath(import.meta.url)), 'src')
}
},
build: {
outDir: 'dist/preload'
}
}
}
]

if (isDevEnv) {
electronPluginConfigs.push({
entry: 'src/main/index.dev.ts',
vite: {
build: {
outDir: 'dist/main'
}
}
})
}

return {
define: {
VUE_I18N_FULL_INSTALL: true,
VUE_I18N_LEGACY_API: false,
INTLIFY_PROD_DEVTOOLS: false
},
resolve: {
extensions: ['.mjs', '.js', '.ts', '.vue', '.json', '.scss'],
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
base: './',
root: resolve('./src/renderer'),
publicDir: resolve('./src/renderer/public'),
clearScreen: false,
build: {
sourcemap: isDevEnv,
minify: !isDevEnv,
outDir: resolve('./dist')
},
plugins: [
Vue(),
VueJsx(),
// Docs: https://github.com/vuetifyjs/vuetify-loader
VuetifyPlugin({
autoImport: true
}),
// EslintPlugin(),
// Docs: https://github.com/electron-vite/vite-plugin-electron
ElectronPlugin(electronPluginConfigs),
RendererPlugin()
]
}
})

[jooy2]

Hello, thank you for using Vutron.

First, Try using __dirname in the following ways:

import path from 'path'
import { fileURLToPath } from 'url'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

path.join(__dirname, '../../src/renderer/public/images/whiteyuki.png')

Check out what the result of path.join looks like in the dev environment.

What is the role of process.resourcesPath, can you try using dev's __dirname instead of this value in production and see if you get any issues after build?

The code in your description is hard to read. Please organize your code using GitHub formatting(e.g. use ```), it will help us troubleshoot quickly.