electron-vite / electron-vite-vue

🥳 Really simple Electron + Vite + Vue boilerplate.
https://electron-vite.github.io
MIT License
3.97k stars 527 forks source link

Can not build success cause of icon set #485

Open JungleHH opened 2 months ago

JungleHH commented 2 months ago

I set my icon in package.json as

build": {  
      "productName": "xx",  
      "appId": "xxx.xx.xx",  
      "win": {  
        "icon": "icon.png" 
      }, 
      "nsis": { 
        "oneClick": false, 
        "guid": "idea", 
        "perMachine": true, 
        "allowElevation": true, 
        "allowToChangeInstallationDirectory": true, 
        "installerIcon": "icon.png", 
        "uninstallerIcon": "icon.png", 
        "createDesktopShortcut": true, 
        "createStartMenuShortcut": true, 
        "shortcutName": "idea" 
      } 
    }

whatever image i set , it throws error failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE and Error while loading icon from "xxxxxxxxxx\webapp\icon.png": invalid icon file. I know this error comes from NSIS, but I have used NSIS which installed on my computer to package other application with this .png file. so, what should I set the shortcut icon correctly?

RSS1102 commented 2 months ago

Is there a directory error?

JungleHH commented 2 months ago

@RSS1102 Really Thanks for your reply! I guess no. If the directory path were wrong, the error will be another one (i have tried) But maybe I am wrong : ) Is there a example for set shortcut icon? I have searched it in example project, but not found it .

RSS1102 commented 2 months ago

try it? image

JungleHH commented 2 months ago

Unfortunately, it does not work

RSS1102 commented 2 months ago

I can use a template to add this. Perhaps you can provide your minimum demo?

JungleHH commented 2 months ago

@RSS1102 oh my god, I convert the .png to .ico, then it works! But why? NSIS document says we can set it both of .png and .ico. Additionally, there is a new problem, when i install and open my packaged program, the page shows blank. ( In detail, there is a square rotating and then disappeared) . I just use your template, create a build folder manually and add build into package.json

RSS1102 commented 2 months ago

.png to .ico :Let me review the code and instructions.

the page shows blank: If it is in dev mode, it is possible that the resource.map cache may cause lag (possibly several tens of seconds). If it is a product opened after build, this problem should not occur. image

JungleHH commented 2 months ago

@RSS1102 Hi, Thanks for your help. I have fixed it.

    "win": {
      "icon": "public/logo.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    }

I add target option to win, it seems that we must indicate the arch explicitly. I'm not familiar with NSIS :( You can close this issue ( or maybe tell me more about the difference between png and ico in NSIS hahah). Thank you!

RSS1102 commented 1 month ago

@JungleHH *. png is possible. image image

JungleHH commented 1 month ago

Ah it's so odd, can you show the metadata of your png?