jooy2
can't find the right file path
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() ] } })
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.
