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

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

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

先看看要做什么

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

以下是开发过程。

创建的基本 Vite 程序

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

在终端下执行以下命令

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

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

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

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

在 Vite 项目中添加 Electron

这里按照 在我们的 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 文件，然后使用，这次不必修改任何内容。

//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 教程。 无偿分享给掘仔们，

到此这篇关于构建Vue3桌面应用程序的方法的文章就介绍到这了,更多相关Vue3桌面应用程序内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！