配置Electron

autoHideMenuBar boolean (可选) - 自动隐藏菜单栏，除非按了Alt键。默认值为 false.

1. 官方文档

在Electron官网的快速入门文档中，有官方给出的利用html、javascript、css来创建一个electron应用的案例，vite+electron的方案也借鉴其中。

2. 安装

首先安装electron至vite应用。目前electron的版本为^15.1.2,。

yarn add --dev electron

3. 配置文件

1）vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' 										// 新增

// https://vitejs.dev/config/
export default defineConfig({
  base: path.resolve(__dirname, './dist/'),	// 新增
  plugins: [vue()]
})

2）main.js

创建一个新的文件main.js，需要注意的是，该内容中index.html的加载路径跟electron官网给的配置不同。

// main.js

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')

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

  // 加载 index.html
  mainWindow.loadFile('dist/index.html') // 此处跟electron官网路径不同，需要注意

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

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

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
// 也可以拆分成几个文件，然后用 require 导入。

3）preload.js

创建一个新的文件preload.js。

// preload.js

// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

4）package.json

为了确保能够运行相关electron的命令，需要修改package.json文件。

首先需要去设置main属性，electron默认会去在开始时寻找项目根目录下的index.js文件，此处我们使用的是main.js，所以需要去定义下。

// package.json

{
  "name": "kuari",
  "version": "0.0.0",
  "main": "main.js", 			// 新增
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "electron": "^15.1.2",
    "vite": "^2.6.4"
  }
}

最后我们需要新增electron的运行命令。

// package.json

{
  "name": "kuari",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "electron:serve": "electron ." // 新增
  },
  "dependencies": {
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "electron": "^15.1.2",
    "vite": "^2.6.4"
  }
}

四. 运行

直接在终端输入如下命令：

yarn electron:serve

接着我们就可以看到我们桌面应用就出来咯！

五. 最后

之前做项目一直用的Vue CLI Plugin Electron Builder，这次有个项目先用electron开发一下，推一波看看，后期看情况swift重新开发一个mac的桌面应用。也刚好尝尝鲜，一直没有机会试试vite。

electron这个东东确实很方便，就是打包出来的应用体积太大，真的是硬伤啊。这次目标人群首先是windows用户，所以上electron吧！

六. 原文博客链接

github.com/Kuari/Blog/…

三. 实现步骤

1. 编辑main.js

将mainWindow.loadFile('dist/index.html')更新为mainWindow.loadURL("http://localhost:3000")，更新后的文件如下所示：

// main.js

// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')

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

  // 加载 index.html
  // mainWindow.loadFile('dist/index.html') 将该行改为下面这一行，加载url
  mainWindow.loadURL("http://localhost:3000")

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

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

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
// 也可以拆分成几个文件，然后用 require 导入。

2. 编辑vite.config.js

修改文件vite.config.js的base，修改后的文件如下所示：

// vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",	// 新增
  plugins: [vue()]
})

3. 同时开启vite和electron服务

为了使vite和electron正常运行，需要先运行vite，使得其开发服务器的url可以正常访问，然后再开启electron去加载url。

此处需要安装两个库：

concurrently：阻塞运行多个命令，-k参数用来清除其它已经存在或者挂掉的进程
wait-on：等待资源，此处用来等待url可访问

首先来安装。

yarn add -D concurrently wait-on

接着更新文件package.json，scripts新增两条命令：

"scripts": {
    "electron": "wait-on tcp:3000 && electron .",
    "electron:serve": "concurrently -k "yarn dev" "yarn electron""
  },

更新后完整内容如下：

{
  "name": "kuari",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "electron": "wait-on tcp:3000 && electron .",
    "electron:serve": "concurrently -k "yarn dev" "yarn electron""
  },
  "dependencies": {
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "concurrently": "^6.3.0",
    "cross-env": "^7.0.3",
    "electron": "^15.1.2",
    "vite": "^2.6.4",
    "wait-on": "^6.0.0"
  }
}

四. 运行

现已添加两条命令：

yarn electron为等待tcp协议3000端口可访问，然后执行electron
yarn electron:serve为阻塞执行开发服务器运行和yarn electron命令

运行项目只要执行命令yarn electron:serve即可，当修改项目文件时，桌面应用也将自动更新。

五. 博客原文

github.com/Kuari/Blog/…

打包

**## 使用 Electron Forge

Electron 的核心模块中没有捆绑任何用于打包或分发文件的工具。如果您在开发模式下完成了一个 Electron 应用，需要使用额外的工具来打包应用程序 (也称为可分发文件) 并分发给用户。可分发文件可以是安装程序 (例如 Windows 上的 MSI) 或者绿色软件 (例如 macOS 上的 .app 文件)。

Electron Forge 是一个处理 Electron 应用程序打包与分发的一体化工具。在工具底层，它将许多现有的 Electron 工具 (例如 electron-packager、 @electron/osx-sign、electron-winstaller 等) 组合到一起，因此您不必费心处理不同系统的打包工作。

导入你的项目到 Forge

将 Electron Forge 的 CLI 工具包安装到项目的 devDependencies 依赖中，然后使用现成的转化脚本将项目导入至 Electron Forge。

npm
Yarn

npm install --save-dev @electron-forge/cli
npx electron-forge import

转换脚本完成后，Forge 会将一些脚本添加到您的 package.json 文件中。

package.json

  //...
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  //...

CLI 文档

有关 make 或其他 Forge API 的更多信息，请查看 Electron Forge CLI 文档。

您还应该注意到您的 package.json 现在安装了更多的包在 devDependencies 下，以及一个导出配置的新 forge.config.js 文件目的。您应该在预填充的配置中看到多个makers（生成可分发应用程序包的包），每个目标平台一个。

创建一个可分发版本

要创建可分发文件，请使用项目中的 make 脚本，该脚本最终运行了 electron-forge make 命令。

npm
Yarn

npm run make

该 make 命令包含两步：

它将首先运行 electron-forge package ，把您的应用程序代码与 Electron 二进制包结合起来。完成打包的代码将会被生成到一个特定的文件夹中。
然后它将使用这个文件夹为每个 maker 配置生成一个可分发文件。

在脚本运行后，您应该看到一个 out 文件夹，其中包括可分发文件与一个包含其源码的文件夹。

macOS output example

out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app

out/make 文件夹中的应用程序应该可以启动了！现在，您已经创建了你的第一个 Electron 程序。

可分发文件格式

Electron Forge 通过配置可以为不同的操作系统创建特定格式的可分发文件 (例如 DMG、deb、MSI 等)。相关配置选项详情，请参阅 Forge 的 Makers 文档。

创建和添加应用程序图标

设置自定义的应用程序图标，需要添加一些额外的配置。查看 Forge 的图标教程了解更多信息。

不使用 ELECTRON FORGE 打包

如果您想手动打包代码，或者是想了解 Electron 的打包机制，可以查看完整的应用程序打包文档。

重要提示：对代码进行签名

将桌面应用程序分发给终端用户前，我们 强烈推荐 您对 Electron 应用进行 代码签名。代码签名是交付桌面应用程序的重要组成部分，并且它对于应用程序的自动更新功能 (将会在教程最后部分讲解) 来说是必需的。

代码签名是一种可用于证明桌面应用程序是由已知来源创建的安全技术。 Windows 和 macOS 拥有其特定的代码签名系统，这将使用户难以下载或启动未签名的应用程序。

在 macOS 上，代码签名是在应用程序打包时完成的。而在 Windows 中，则是对可分发文件进行签名操作。如果您已经拥有适用于 Windows 和 macOS 的代码签名证书，可以在 Forge 配置中设置您的凭据。

INFO

欲了解更多代码签名的信息，请参阅Forge文档中的签署 macOS 应用程序指南。

macOS
Windows

forge.config.js

module.exports = {
  packagerConfig: {
    osxSign: {},
    //...
    osxNotarize: {
      tool: 'notarytool',
      appleId: process.env.APPLE_ID,
      appleIdPassword: process.env.APPLE_PASSWORD,
      teamId: process.env.APPLE_TEAM_ID,
    }
    //...
  }
}

摘要

Electron 应用程序需要打包后分发给用户。在本教程中，您将应用程序导入 Electron Forge 并对其进行配置以打包您的应用程序并生成安装程序。

为了让应用程序受到用户系统的信任，您需要以数字签名证明可分发文件的内容是真实的并且未被代码签名篡改。只要在应用配置中添加签名证书信息，您就可以通过 Forge 对其进行签名。**

electron打包vue3项目

配置Electron

1. 官方文档

2. 安装

3. 配置文件

1）vite.config.js

2）main.js

3）preload.js

4）package.json

四. 运行

五. 最后

六. 原文博客链接

三. 实现步骤

1. 编辑main.js

2. 编辑vite.config.js

3. 同时开启vite和electron服务

四. 运行

五. 博客原文

打包

导入你的项目到 Forge​

创建一个可分发版本​

重要提示：对代码进行签名​

摘要​

导入你的项目到 Forge

创建一个可分发版本

重要提示：对代码进行签名

摘要