如何搭建 Electron 项目

前言

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

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

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

Electron 官方文档

create-vue 项目地址

环境

node: v18.16.0

npm: v9.5.1

Electron: v24.2.0

Vite: v4.3.2

Vue: v3.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 更新代码后重新打包。

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  win.loadFile("http://localhost:5173/");
};

同步打包

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

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

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

vue-app/vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  build: {
    outDir: "../electron-app",
    emptyOutDir: false, // 这个很重要，别把Electron项目文件夹给清空了
  },
  plugins: [vue()],
});

const NODE_ENV = process.env.NODE_ENV;

const config = {
  production: {
    loadFile: path.join(__dirname, `./index.html`),
  },
  development: {
    loadFile: "http://localhost:5173/",
  },
};

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  win.loadURL(
    config[NODE_ENV]?.loadFile || path.join(__dirname, `./index.html`)
  );
};

编写 package.json 文件

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

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

大致目录结构如下：

─electron-template
  ├─electron-app
  ├─vue-app
  └─package.json

安装

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

{
  "scripts": {
    "electron:install": "cd ./electron-app && yarn install",
    "vue:install": "cd ./vue-app && yarn install",
    "all:install": "yarn vue:install && yarn electron:install"
  }
}

运行

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

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

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

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

打包

看前面的解释 =_=

{
  "scripts": {
    "electron:build": "cd ./electron-app && yarn make",
    "vue:build": "cd ./vue-app && yarn build",
    "all:build": "cross-env NODE_ENV=production yarn vue:build && yarn electron:build"
  }
}

执行打包命令

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

yarn all:build

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

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