构建Vue3桌面应用程序的方法

在本文中，我们将研究如何通过 Vite 开发 Vue 3 桌面项目。

在项目中会用到 Electron ， 一种最流行的框架，可使用Javascript构建跨平台的桌面应用程序。 因此，许多受欢迎的应用程序都在使用Electron，例如VSCode，Slack，Twitch等。

先看看要做什么：

尽管这只是一个 Vite 的基本模板，但它跑在专用程序而不是浏览器中。 这是构建自己的桌面应用的必要步骤。

以下是开发过程。

创建的基本 Vite 程序

首先创建 Vite 应用。 在这里不会过多介绍 Vite 的工作原理。

在终端下执行以下命令：

 npm init @vitejs/app cd [project-name] npm install 

完成了，先在浏览器中试一下。

在终端中简单的运行 npm run dev 命令。然后在浏览器中打开本机地址，可以看到是这样的：

没有问题，接着就该把 Electron 添加到它的设置中了。

在 Vite 项目中添加 Electron

这里按照 Electron 官方的 quick start 在我们的 Vite 应用中进行一些调整。

首先安装 Electron。在终端下输入以下命令：

 Install Electronnpm install --save-dev electron

接着再看一下 Electron 手册。

手册上说简单的 Electron 配置需要四个文件：

• package.json ―― 这个已经有了
• main.js
• preloader.js
• index.html

看上去项目中已经有了 main.js和index.html文件，但它们是 Vite 的文件，而不是 Electron 的文件。 Vite 的文件只能用于运行 Vite 程序，所以还需要提供单独的 Electron 文件。

main.js 用于创建桌面程序并加载到 index.html 中，它还应该包括我们构建的 Vite 程序代码。

构建 Vite 程序

所以首先必须构建 Vite 程序。 因为要把它与 Electron 进行整合，所以还需要做一些额外的配置。我们要确保在构建项目时，对最终 javascript 和 css 文件的所有引用都指向正确的路径。

要构建的 Vite 项目将会创建以下结构的 dist 目录。

但是由于我们的 Electron 代码位于项目的根目录中，所以应该将整个项目的基础设置为 dist 文件夹。 可以通过 path 库在 vite.config.js 文件中设置 base 属性来实现。

 //vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' const path = require('path') // https://vitejs.dev/config/ export default defineConfig({ base: path.resolve(__dirname, './dist/'), plugins: [vue()] }) 

现在可以在终端中运行 npm run build 来创建 dist 目录了。

设置 Electron 的 main.js

下一步是在项目的根目录中创建 main.js 文件。

创建完毕后我们只需要从 Electron quick start guide 中复制粘贴代码就行了。

在我们加载 index.html 的地方，要将其改为 dist/index.html，以便在 dist 目录中使用该文件。

所以 main.js 中的最终代码是这样：

 //main.js 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') } }) 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.

接下来让在项目根目录中创建 preload.js 文件，然后再次使用quick start code，这次不必修改任何内容。

 //preload.js window.addEventListener('DOMContentLoaded', () => { const replaceText = (selector, text) => { const element = document.getElementById(selector) if (element) element.innerText = text } for (const type of ['chrome', 'node', 'electron']) { replaceText(`${type}-version`, process.versions[type]) } }) 

修改 package.json

差不多快要完成了，最后还需要对 package.json文件进行一些修改，以便运行 Electron 命令。

首先要设置 main 属性，在默认情况下，Electron 会在根目录中查找 index.js 文件并执行，但是由于我们的文件名为 main.js，所以需要在 package.json 中定义。

 //package.json { "name": "vite-electron", "version": "0.0.0", "main": "main.js", // 这一行 ... } 

然后设置运行 Electron 的方式，在 scripts 部分中新创建一个名为electron:start 的脚本，内容是electron . 。

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

以上就是所有的代码了。

最后在终端中执行： npm run electron:start 命令，然后就能看到：

桌面程序终于完成了，很简单吧～

写在最后

近期在提升 Vue 的过程中，发现一个高逼格的 Vue3+TS 教程。 无偿分享给掘仔们，戳我看教程