electron-builder打包vue2项目问题总结

更新时间：2024年08月03日 10:21:53 作者：不恰香菜辣baga

这篇文章主要介绍了electron-builder打包vue2项目问题总结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

一、打包之后不显示elecmentui的图标

1、使用版本

vue ^2.6.14
element-ui ^2.15.14
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:"/"
    }
  }
})

二、修改打包之后的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'
    })

5、修改vue.config.js文件

  pluginOptions:{
    electronBuilder:{
      customFileProtocol:"/",
      win:{
         icon:"favicon.ico"
      },
      nodeIntegration: true
    }
  }

6、打包 npm run electron:generate-icons 然后再 npm run electron:build

到此这篇关于electron-builder打包vue2项目问题合集的文章就介绍到这了,更多相关electron-builder打包vue2项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

浅谈在vue中使用mint-ui swipe遇到的问题
今天小编就为大家分享一篇浅谈在vue中使用mint-ui swipe遇到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
教你一招解决vue页面自适应布局
在前端开发的时候经常会遇到这样的困惑,设计师给你的设计稿的尺寸和页面的尺寸不一致,导致了页面无法正常显示,下面这篇文章主要给大家介绍了关于一招解决vue页面自适应布局的相关资料,需要的朋友可以参考下
2022-07-07
Vue使用CDN引用项目组件，减少项目体积的步骤
这篇文章主要介绍了Vue使用CDN引用项目组件，减少项目体积的步骤，帮助大家提高项目加载速度，感兴趣的朋友可以了解下
2020-10-10
Vue源码分析之Vue实例初始化详解
这篇文章主要给大家介绍了关于Vue源码分析之Vue实例初始化的相关资料,需要的朋友可以参考下
2019-08-08
Vue3点击侧边导航栏完成切换页面内组件全过程(WEB)
写页面的时候都会用到一些导航栏、点击不同的部分切换不同的页面,下面这篇文章主要给大家介绍了关于Vue3点击侧边导航栏完成切换页面内组件的相关资料,需要的朋友可以参考下
2023-06-06
vue elementui简易侧拉栏的使用小结
这篇文章主要介绍了vue elementui简易侧拉栏的使用,增加了侧拉栏,目的是可以选择多条数据展示数据,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-06-06
深入理解vue3中的reactive()
本文主要介绍了深入理解vue3中的reactive()，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
详解vue3+element-plus实现动态菜单和动态路由动态按钮(前后端分离)
本文需要使用axios,路由,pinia,安装element-plus,并且本文vue3是基于js而非ts的,这些环境如何搭建不做描述,需要读者自己完成,感兴趣的朋友跟随小编一起看看吧
2023-11-11
Vue 动态路由的实现详情
这篇文章主要介绍了Vue 动态路由的实现，动态路由是一个常用的功能，根据后台返回的路由json表，前端动态显示可跳转的路由项，本文主要实现的是后台传递路由，前端拿到并生成侧边栏的一个形势，需要的朋友可以参考一下
2022-06-06
vue中优雅实现数字递增特效的详细过程
项目中需要做数字滚动增加的效果,一开始很懵,研究了一下原理,发现很简单,下面这篇文章主要给大家介绍了关于vue中优雅实现数字递增特效的详细过程,需要的朋友可以参考下
2022-12-12