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

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

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

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

创建Vite 应用程序

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

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

bash 复制代码

npm init vite
cd [project-name]
npm install

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

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

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

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

bash 复制代码

npm install --save-dev electron

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

bash 复制代码

/ 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

bash 复制代码

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 过来就可以了。

内容如下：

bash 复制代码

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 ,什么也不需要做。

jsx 复制代码

window.addEventListener("DOMContentLoaded", () => {

   console.log(' Hello Electron');

});

package.json 修改

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

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

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

代码如下：

jsx 复制代码

{

  "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 这样知名的桌面应用。并且还存在一些瑕疵，比如无法进行热重载啊，没有涉及到系统的能力的调用啊，等等。我们会在后续进行实例演示。

请关注我的后续文章。