在本文中，我們將研究如何通過 Vite 開發(fā) Vue 3 桌面項(xiàng)目。

在項(xiàng)目中會用到 Electron ， 一種最流行的框架，可使用Javascript構(gòu)建跨平臺的桌面應(yīng)用程序。 因此，許多受歡迎的應(yīng)用程序都在使用Electron，例如VSCode，Slack，Twitch等。

先看看要做什么：

盡管這只是一個 Vite 的基本模板，但它跑在專用程序而不是瀏覽器中。 這是構(gòu)建自己的桌面應(yīng)用的必要步驟。

以下是開發(fā)過程。

創(chuàng)建的基本 Vite 程序

首先創(chuàng)建 Vite 應(yīng)用。 在這里不會過多介紹 Vite 的工作原理。

在終端下執(zhí)行以下命令：

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

完成了，先在瀏覽器中試一下。

在終端中簡單的運(yùn)行 npm run dev 命令。然后在瀏覽器中打開本機(jī)地址，可以看到是這樣的：

沒有問題，接著就該把 Electron 添加到它的設(shè)置中了。

在 Vite 項(xiàng)目中添加 Electron

這里按照 Electron 官方的 quick start 在我們的 Vite 應(yīng)用中進(jìn)行一些調(diào)整。

首先安裝 Electron。在終端下輸入以下命令：

Install Electronnpm install --save-dev electron

接著再看一下 Electron 手冊。

手冊上說簡單的 Electron 配置需要四個文件：

• package.json —— 這個已經(jīng)有了
• main.js
• preloader.js
• index.html

看上去項(xiàng)目中已經(jīng)有了 main.js和index.html文件，但它們是 Vite 的文件，而不是 Electron 的文件。 Vite 的文件只能用于運(yùn)行 Vite 程序，所以還需要提供單獨(dú)的 Electron 文件。

main.js 用于創(chuàng)建桌面程序并加載到 index.html 中，它還應(yīng)該包括我們構(gòu)建的 Vite 程序代碼。

構(gòu)建 Vite 程序

所以首先必須構(gòu)建 Vite 程序。 因?yàn)橐阉c Electron 進(jìn)行整合，所以還需要做一些額外的配置。我們要確保在構(gòu)建項(xiàng)目時，對最終 javascript 和 css 文件的所有引用都指向正確的路徑。

要構(gòu)建的 Vite 項(xiàng)目將會創(chuàng)建以下結(jié)構(gòu)的 dist 目錄。

但是由于我們的 Electron 代碼位于項(xiàng)目的根目錄中，所以應(yīng)該將整個項(xiàng)目的基礎(chǔ)設(shè)置為 dist 文件夾。 可以通過 path 庫在 vite.config.js 文件中設(shè)置 base 屬性來實(shí)現(xiàn)。

//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()]
})

現(xiàn)在可以在終端中運(yùn)行 npm run build 來創(chuàng)建 dist 目錄了。

設(shè)置 Electron 的 main.js

下一步是在項(xiàng)目的根目錄中創(chuàng)建 main.js 文件。

創(chuàng)建完畢后我們只需要從 Electron quick start guide 中復(fù)制粘貼代碼就行了。

在我們加載 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()
  }
})

創(chuàng)建并編寫 preload.js.

接下來讓在項(xiàng)目根目錄中創(chuàng)建 preload.js 文件，然后再次使用quick start code，這次不必修改任何內(nèi)容。

//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文件進(jìn)行一些修改，以便運(yùn)行 Electron 命令。

首先要設(shè)置 main 屬性，在默認(rèn)情況下，Electron 會在根目錄中查找 index.js 文件并執(zhí)行，但是由于我們的文件名為 main.js，所以需要在 package.json 中定義。

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

然后設(shè)置運(yùn)行 Electron 的方式，在 scripts 部分中新創(chuàng)建一個名為electron:start 的腳本，內(nèi)容是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 ." // 這里
  },
  ...
}

以上就是所有的代碼了。

最后在終端中執(zhí)行： npm run electron:start 命令，然后就能看到：

桌面程序終于完成了，很簡單吧～

寫在最后

近期在提升 Vue 的過程中，發(fā)現(xiàn)一個高逼格的 Vue3+TS 教程。 無償分享給掘仔們，戳我看教程

到此這篇關(guān)于構(gòu)建Vue3桌面應(yīng)用程序的方法的文章就介紹到這了,更多相關(guān)Vue3桌面應(yīng)用程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論