当前位置:   article > 正文

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

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即可
在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/黑客灵魂/article/detail/936107
推荐阅读
相关标签
  

闽ICP备14008679号