Vue + Electron 实操：轻松抹除头部菜单，打造极简桌面应用

本文链接：https://blog.youkuaiyun.com/qq_65243376/article/details/146222121

前言：家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，

求个收藏 + 关注啦～后续还有超多惊喜，别错过！

方法一：使用 autoHideMenuBar

引言

在使用 Electron 打包 Vue 项目时，有时候默认的头部菜单可能不符合我们的设计需求，需要将其去掉。本文将详细介绍如何在 Electron 中将 Vue 项目的头部菜单移除，同时给出完整的操作步骤和代码示例。

一、项目准备

1. 创建 Vue 项目

如果你还没有 Vue 项目，可以使用 Vue CLI 来创建一个新的项目：

# 全局安装 Vue CLI（若未安装）
npm install -g @vue/cli
# 创建一个新的 Vue 项目
vue create my-vue-app
cd my-vue-app

2. 安装 Electron 相关依赖

在 Vue 项目中安装 electron 和 electron-builder：

npm install electron electron-builder --save-dev

3. 创建 Electron 主进程文件

在项目根目录下创建 electron.main.js 文件，该文件是 Electron 应用的主进程文件：

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.join(__dirname, 'preload.js')
    }
  });

  // 加载 Vue 项目的打包文件
  win.loadFile(path.join(__dirname, 'dist/index.html'));
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', function () {
    // 在 macOS 上，当单击 dock 图标并且没有其他窗口打开时，通常在应用程序中重新创建一个窗口
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// 除了 macOS 外，当所有窗口都关闭时退出应用程序
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

4. 创建预加载脚本

在项目根目录下创建 preload.js 文件，用于在渲染进程和主进程之间进行安全通信：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  send: (channel, data) => {
    ipcRenderer.send(channel, data);
  },
  receive: (channel, func) => {
    ipcRenderer.on(channel, (event, ...args) => func(...args));
  }
});

5. 配置 `package.json`

在 package.json 中添加如下脚本和配置：

{
  "name": "my-vue-app",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron:serve": "vue-cli-service electron:serve",
    "electron:build": "vue-cli-service electron:build"
  },
  "main": "electron.main.js",
  "author": "Your Name",
  "license": "MIT",
  "devDependencies": {
    "electron": "^24.0.0",
    "electron-builder": "^23.6.0"
  },
  "build": {
    "appId": "com.example.myapp",
    "productName": "My Vue App",
    "directories": {
      "output": "dist_electron"
    },
    "win": {
      "target": [
        "nsis"
      ]
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  }
}

二、去掉头部菜单

在 Electron 中，去掉头部菜单非常简单，只需要在创建 BrowserWindow 时，设置 autoHideMenuBar 或 menu 选项即可。

方法一：使用 `autoHideMenuBar`

在 electron.main.js 文件的 createWindow 函数中，添加 autoHideMenuBar: true 选项：

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    autoHideMenuBar: true, // 自动隐藏菜单
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.join(__dirname, 'preload.js')
    }
  });

  win.loadFile(path.join(__dirname, 'dist/index.html'));
}

autoHideMenuBar: true 会使菜单自动隐藏，当用户按下 Alt 键时，菜单会显示出来。

方法二：将 `menu` 设置为 `null`

在 electron.main.js 文件的 createWindow 函数中，添加 menu: null 选项：

const { app, BrowserWindow, Menu } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.join(__dirname, 'preload.js')
    }
  });

  win.loadFile(path.join(__dirname, 'dist/index.html'));
  Menu.setApplicationMenu(null); // 去掉菜单
}

Menu.setApplicationMenu(null) 会完全移除应用的菜单，用户无法通过任何方式显示菜单。

三、构建与打包

1. 构建 Vue 项目

执行以下命令来构建 Vue 项目：

npm run build

此命令会把 Vue 项目打包到 dist 目录下。

2. 打包 Electron 应用

执行以下命令把 Electron 应用打包成 .exe 文件：

npm run electron:build

打包完成后，你会在 dist_electron 目录下找到生成的 .exe 文件。

四、注意事项

安全问题：在 webPreferences 里设置 nodeIntegration: true 和 contextIsolation: false 会带来安全风险，在生产环境中建议使用预加载脚本进行安全通信。
版本兼容性：要保证 electron 和 electron-builder 的版本相互兼容，避免出现打包问题。
打包配置：可依据需求对 package.json 中的 build 配置进行调整，例如更改应用图标、设置安装路径等。

通过以上步骤，你不仅可以将 Vue 项目打包成一个 Windows 桌面应用（.exe），还能去掉应用的头部菜单，让应用界面更加简洁。