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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

在本文中，我们将研究如何通过 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 命令，然后就能看到：

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