使用 Vite & Vue3 和 Electron 构建桌面应用程序

Electron——使用 JavaScript 构建跨平台桌面应用程序的最流行的框架之一。许多流行的应用程序都在使用 Electron，例如 VS Code、Slack、Twitch 等等。

但是Electron 给我们提供的官方入门，指南并不符合我们现在的 前端开发技术栈，只是一个简单的demo ，html 页面让我们入门变得非常困难。

本文就使用Vite 创建一个基础web 工程，并集成Electron 桌面端能力。

创建Vite 应用程序

首先，我们通过Vite 提供的脚手架，创建一个基础的Vue 模板工程。

操作过程很简单， 我们通过下边的命令， 直接创建然后，选择即可。

npm init vite 

cd [project-name]

npm install

初始化完，项目工程。 我们进入目录，使用命令， npm run dev , 就可以看到 Vite 模板工程的首页了。 接下来，我们将把Electron 添加到此工程中，让一个Web 工程，转变为桌面应用程序。

将Electron 添加到我们的Vite 项目中

Electron 官方的快速 入门指南，跟本文近似。但是根据 Vite+ Vue 做了一些适应性的修改 。

第一步，我们要在项目中，安装 Electron 的依赖。

npm install --save-dev electron

根据Electron 的官方文档，描述。 一个最基础的 Electron 桌面应用 结构应该是这样的。

/ src
|----- package.json
|----- main.js
|----- index.html
|----- preloader.js
 

似乎 main.js 和 index.html 这两个文件，我么们已经有了。 但是这是Vite 和Vue3 所需要的文件，而不是我们 Electron 框架所需要的。

Electron 需要单独的main.js 和 index.html 来启动桌面程序， 其中包括构建好的Vue工程。

构建我们的Vue3 应用程序

由于我们的Vite 加 Vue3 项目，使用了一些其他技术，所以我们在部署Web 应用的时候需要先构建。 在Electron 项目中，也是同样的道理，我们需要先构建我们的Vue3 + vite 的项目。

因为我们的希望构建完之后的 js 和 css 相关素材的引用路径在 Electron 中是正确的，所以我们的构建脚本文件需要做一些适应性的修改 。

构建文件修改如下。

vite.vonfig.ts

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

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

我们在终端中，执行 npm run build 命令。 就在根目录中生成了， dist 文件夹。

设置 Electron 框架

有了Vue3 项目构建出来的 dist 目录之后， 设置Electron 就很简单了。

首先，我们在项目的根目录下，创建 main.js 文件。

并将， Elctron 官方文档中的， main.js 文件内容 copy 过来就可以了。

内容如下：

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });
    // 注意：
  //  因为我们加载的是Vue 构建后的dist 目录，所以我们需要改一下， load
  //  的文件地址。
  win.loadFile("dist/index.html");
}

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

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

创建 preload.js 文件

跟main.js 类似， 我们在根目录下， 创建preload.js 文件。

这个文件，会在 Vue 项目被加载之前注入 index.html 中，并首先执行。

我们以后，在介绍，可以用这个文件干什么。 现在，我们只打条log ,什么也不需要做。

window.addEventListener("DOMContentLoaded", () => {
     console.log(' Hello Electron');
});

package.json 修改

到这一步，我们的 Electron 桌面项目基本就能跑起来了。

但我们还需要改一下，package.json , 将我们的桌面项目运行脚本加入 scripts 中。

并 增加 main 字段，指定为 main.js

代码如下：

{
  "name": "vite-electron",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "electron:start": "electron ."
  }
}

总结

经过这一系列的配置，我们就拥有了一个基础的 Vue3 + Vite + typeScript 的Elctron 桌面应用开发环境。

当然，这只是一个基础的模板工程。 并不像，我们熟知的Vscode 这样知名的桌面应用。 并且还存在一些瑕疵，比如无法进行 热重载啊， 没有涉及到系统的能力的调用啊， 等等。 我们会在后续进行 实例演示。

请关注我的后续文章。