如何搭建 Electron 项目

前言

前段时间帮一个不是程序员的朋友搭建了属于自己的博客，但是他不会 Github 和 VS Code，这就让更新博客成为一件麻烦事。

又因为朋友的特殊使用习惯，单纯使用网页更新的话，安全性得不到保障，而且不能初始化和自定义设置。因为我没服务器，无法搭建 http 服务和数据库。

思考了一段时间，突然想起我是个前端啊，那用 Electron 直接写个桌面应用不就行了。敏感数据直接保存到本地，也不用担心安全问题，还省了服务器的费用（这是重点）。

Electron 官方文档

create-vue 文档

环境

node: 18.16.0

npm: 9.5.1

electron: 24.2.0

vite: 4.3.2

vue: 3.2.47

实现

初上手 Electron，目录结构犯了难，是把 Vue 项目直接放在 Electron 项目内好呢，还是分开好一些。

在网上搜了一下最佳实践，好像都有。

偶然间在知乎看见一个大佬解释 Electron 项目，“其实把 Electron 想象成在本地部署运行的 node 服务和 Vue 项目就行了，不要过多思考 Electron 的定位”。

这一下茅塞顿开，决定将 Vue 和 Electron 分别存放开发。

这样以后将页面单独剥离，作为 web 项目开发，也不会有什么阻碍。

初始化 Electron 项目和 Vue 项目

Electron 项目推荐跟着 Electron 快速入门 来搭建，简单易上手。

Vue 项目推荐使用 create-vue 脚手架来搭建，也是简单易上手，毕竟我们的目标是快速开发应用。

整合 Electron 和 Vue

当两个项目初始化成功，那接下来的最大问题就是，如何同步开发与打包。

同步开发

练习了 Electron 快速入门 的人，自然会记得创建窗口的 createWindow 方法内，win 对象调用的 loadFile 方法，它的入参是一个地址。

而我们本地运行的 Vue 项目也提供了一个本地地址，http://localhost:5173/。

没错，我们可以直接把这个地址作为入参传入 loadFile 方法，实现同步开发，不用在每次 Vue 更新代码后重新打包。

1const createWindow = () => {
2  const win = new BrowserWindow({
3    width: 800,
4    height: 600,
5  });
6
7  win.loadFile("http://localhost:5173/");
8};

同步打包

开发的时候，可以使用本地地址，那打包的时候就不行了呀。Electron 项目是需要使用入口文件 index.html 的，如果 Vue 项目在项目文件夹内打包，Electron 项目肯定是引用不到的，那该如何解决这个问题呢？

也很简单，直接修改 Vite 的配置文件，将输出路径改为 Electron 的根目录。之所以是根目录，是因为放在别的路径下，Electron 并不能很好的识别到依赖文件并进行打包，当然也可能是因为我还没有完全了解 Electron 的配置。

网上有推荐 electron-builder 插件包，来实现打包操作，但根据我的使用体验，electron-forge，这个官方的打包插件已经能满足我的需要了。

vue-app/vite.config.ts

1import vue from "@vitejs/plugin-vue";
2import { defineConfig } from "vite";
3
4// https://vitejs.dev/config/
5export default defineConfig({
6  base: "./",
7  build: {
8    outDir: "../electron-app",
9    emptyOutDir: false, // 这个很重要，别把Electron项目文件夹给清空了
10  },
11  plugins: [vue()],
12});

1const NODE_ENV = process.env.NODE_ENV
2
3const config = {
4  production: {
5    loadFile: path.join(__dirname, `./index.html`),
6  },
7  development: {
8    loadFile: 'http://localhost:5173/'
9  },
10}
11
12const createWindow = () => {
13  const win = new BrowserWindow({
14    width: 800,
15    height: 600,
16  });
17
18  win.loadURL(config[NODE_ENV]?.loadFile || path.join(__dirname, `./index.html`));
19};

编写 package.json 文件

这个 package.json 文件并不是 Electron 项目或者 Vue 项目的，而是属于包裹着这两个项目的 npm 项目的配置文件。

我们需要编写安装，运行，打包三个命令。

大致目录结构如下：

1─electron-template
2  ├─electron-app
3  ├─vue-app
4  └─package.json

安装

没什么好说的，&& 串行执行。

1{
2  "scripts": {
3    "electron:install": "cd ./electron-app && yarn install",
4    "vue:install": "cd ./vue-app && yarn install",
5    "all:install": "yarn vue:install && yarn electron:install"
6  }
7}

运行

cross-env 是运行跨平台设置和使用环境变量的脚本，创造一个全局环境变量，主要用来区分开发与生产环境

concurrently 是前端工程化并行解决方案，就是并行运行多条命令

wait-on 是跨平台异步方式调用同步方法插件包，简单理解就是 async 和 await

1{
2  "scripts": {
3    "electron:start": "wait-on tcp:5173 && cd ./electron-app && yarn start",
4    "vue:start": "cd ./vue-app && yarn dev",
5    "all:start": "cross-env NODE_ENV=development concurrently -k \"yarn vue:start\" \"yarn electron:start\""
6  }
7}

打包

看前面的解释 =_=

1{
2  "scripts": {
3    "electron:build": "cd ./electron-app && yarn make",
4    "vue:build": "cd ./vue-app && yarn build",
5    "all:build": "cross-env NODE_ENV=production yarn vue:build && yarn electron:build"
6  }
7}

执行打包命令

在根目录执行all:build打包命令，如果在 Electron 项目根目录下出现 out 文件夹，就代表你打包成功。

1yarn all:build

打开里面的 exe 文件，如果你能看见以下截图画面，就代表你成功运行了 Electron 项目。

具体的代码可以到 我的仓库 查看。