记录一则Electron踩坑笔记

最新推荐文章于 2022-12-01 19:37:57 发布

bingduYu

最新推荐文章于 2022-12-01 19:37:57 发布

阅读量320

点赞数

分类专栏： js学习笔记 vue学习

本文链接：https://blog.youkuaiyun.com/Yugoup/article/details/119424991

版权

js学习笔记同时被 2 个专栏收录

40 篇文章

订阅专栏

vue学习

14 篇文章

订阅专栏

本文介绍了如何在Vue项目中修改Electron桌面应用的图标、名称及窗口配置，包括在vue-config.js中设置产品名和图标，以及在主进程中调整窗口属性如居中、不可拉伸、不可最大化等，确保窗口行为符合预期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.修改Electron打包桌面图标和应用名

我在网上找的好多都是说在page.json里的build下进行修改，但是可能不适用我的项目
最后在vue-config.js里进行配置。

pluginOptions:{
        electronBuilder:{
           nodeIntegration:true,
           builderOptions:{
               appId:"te.com",
               productName: "桌面应用的名字",//这里的名字可以放在page.json里，和name字段放一起
               win:{//这是win系统
                   icon:"./public/favicon.ico"//桌面应用的图标
               },
               extraResources: [
               //这里是打包后icon的路径发生变化，导致底部菜单栏窗口左上角的图标不显示
                    {
                        "from": "./public/favicon.ico",
                        "to": "./public/favicon.ico"
                    }
                ]
           }
           
        }
    }

2.修改窗口的一些配置

窗口居中
窗口不可拉伸
双击窗口头部不可最大化
标题栏是否可以自定义
修改窗口的图标
修改窗口的标题部分

在主进程里的new BrowserWindow里加入icon和title属性即可，

win = new BrowserWindow({
    width: 920,
    height: 600,
    center: true, // 窗口居中
    resizable: false, // 窗口大小是否可改变
    maximizable: false, // 窗口是否可以最大化
    icon:iconUrl,
    title:'搜寻定位系统',//这里设置窗口的标题
    frame: false, // 标题栏自定义
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      enableRemoteModule: true,
    }
  })