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()
]
}
})