electron-builder打包vue2项目问题合集_vue打包后element图标没有了

一、打包之后不显示elecmentui的图标
1、使用版本

1. vue ^2.6.14
2. element-ui ^2.15.14
3. vue-cli-plugin-electron-builder 2.1.1

2、解决办法

1） 如果是简单的图标可以使用图片代替（这种对于elementui组件的图标还是不会显示）
2）在vue.config.js配置

const { defineConfig } = require('@vue/cli-service')
 
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false,
  pluginOptions:{
    electronBuilder:{
      customFileProtocol:"/"
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11

二、修改打包之后的app图标
不添加配置默认图标

1、将图片放在public文件夹下面
2、npm install electron-icon-builder
3、修改package.json文件(很奇怪这里只能用png文件不能使用.ico文件)
“electron:generate-icons”:“electron-icon-builder --input=./public/logo.png --output=build --flatten”
4、修改background.js

  const win = new BrowserWindow({
    width: 800,
    height: 600,
    icon:'./public/favicon.ico'
    })
1
2
3
4
5

5、修改vue.config.js文件

  pluginOptions:{
    electronBuilder:{
      customFileProtocol:"/",
      win:{
         icon:"favicon.ico"
      },
      nodeIntegration: true
    }
  }
1
2
3
4
5
6
7
8
9

6、打包 npm run electron:generate-icons 然后再 npm run electron:build
出来的效果图：

重新测试（不需要electron-icon-builder）的步骤：
1、在packge.json文件添加

  "win": {
    "icon": "__dirname+'icon.ico'"
  },
  "scripts": {
  ...
  }
1
2
3
4
5
6

2、在background.js添加

 const win = new BrowserWindow({
    width: 800,
    height: 600,
    icon:path.join(__dirname,'favicons.ico'),  //这个图片放在public下面就行
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
    }
  })
1
2
3
4
5
6
7
8
9

注：使用favicon测试发现这个图片是app运行时窗口的icon和任务栏的icon

直接打包npm run electron:build即可