超详细！！！electron-vite-vue开发桌面应用之Electron自定义头部菜单栏（六）

置顶 niech_cn

已于 2024-08-15 11:14:24 修改

阅读量554

点赞数 16

分类专栏： Electron+vite+vue搭建桌面应用文章标签： electron vue.js javascript

于 2024-08-15 10:43:21 首次发布

本文链接：https://blog.csdn.net/qq_43206280/article/details/141216014

版权

Electron+vite+vue搭建桌面应用专栏收录该内容

13 篇文章 0 订阅

订阅专栏

云风网
 云风笔记
 云风知识库

上篇配置完路由基本可以进行业务逻辑界面开发了，但是对于头部存在的菜单栏明显是不符合需求的，这里可以配置隐藏

一、配置应用名称以及图标

/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>云风笔记</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

electron/main.ts

export const VITE_DEV_SERVER_URL = process.env['VITE_DEV_SERVER_URL']
export const MAIN_DIST = path.join(process.env.APP_ROOT, 'dist-electron')
export const RENDERER_DIST = path.join(process.env.APP_ROOT, 'dist')

process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL ? path.join(process.env.APP_ROOT, 'public') : RENDERER_DIST

let win: BrowserWindow | null

function createWindow() {
  win = new BrowserWindow({
    icon: path.join(process.env.VITE_PUBLIC, 'logo.png'),
  })
}

在这里插入图片描述

二、隐藏头部菜单栏

import { app,Menu, BrowserWindow } from 'electron'
// 隐藏应用菜单
Menu.setApplicationMenu(null);

在这里插入图片描述

也可以通过配置参数frame:false实现整体隐藏

function createWindow() {
  win = new BrowserWindow({
    icon: path.join(process.env.VITE_PUBLIC, 'electron-vite.svg'),
    frame: false, // 去掉导航最大化最小化以及关闭按钮
    width: 800,
    height: 600,
    minWidth: 800,
    minHeight: 600,
    center: true,
    webPreferences: {
      preload: path.join(__dirname, 'preload.mjs')
    },
  })
}