electron+vue3 应用更换应用图标

electron+vue3应用 更换应用图标

准备工作：

• Linux： public/favicon.ico 256X256
• mac：resources/icons/orico.icns
• win：resources/icons/orico.ico

文件目录如下图：

注：因为是设置icon，只显示和icon相关配置，其他代码忽略。

文件 background.js

let appIcon
  if (isDevelopment) {
    
    
    appIcon = './resources/icons/orico.ico'  // 换成你自己的路径
  } else {
    
    
    appIcon = process.resourcesPath + '/icons/orico.png'
  }
  win = new BrowserWindow({
    
    
    width: 900,
    height: 650,
    icon: appIcon, // 重点是这个
    webPreferences: {
    
    
    }
  })

文件 vue.config.js

module.exports = defineConfig({
    
    
  runtimeCompiler: true,
  transpileDependencies: true,
  pluginOptions: {
    
     
    electronBuilder: {
    
    
      nodeIntegration: true,
      webSecurity: false,
      builderOptions: {
    
      // 重点是这个
        productName: `${
      
      productName}`,
        appId: 'com.orico',
        asar: true,
        linux: {
    
    
          target: ['deb'],
          category: 'Utility',
          icon: './resources/icons/orico'
        },
        mac: {
    
    
          icon: './resources/icons/orico.icns'
        },
        win: {
    
    
          target: [{
    
    
            target: 'nsis'
          }],
          icon: './resources/icons/orico.ico'
        },
        nsis: {
    
    
          oneClick: false,
          allowToChangeInstallationDirectory: true,
          perMachine: true,
          allowElevation: true,
          runAfterFinish: true,
          createDesktopShortcut: true,
          createStartMenuShortcut: true,
          deleteAppDataOnUninstall: true,
        },
        extraResources: {
    
    
          // 拷贝静态文件到指定位置,否则打包之后出现找不到资源的问题.将整个resources目录拷贝到 发布的根目录下
          from: './resources/',
          to: './'
        }
      }
    }
  }
})

暖心提示：以上都设置完成后，你如果确定自己设置的都对，但是就是不起效果，重启也好，清缓存也罢...我的建议是，你等会儿再来看看，可能就好了，我就是这样的。