仅需5分钟构建 Vue 3 桌面应用程序

在本文中，咱们将研究如何经过 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 配置须要四个文件：

1. package.json —— 这个已经有了
2. main.js
3. preloader.js
4. 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 教程。 无偿分享给掘仔们，戳我看教程