構(gòu)建Vue3桌面應用程序的方法

更新時間：2021年05月21日 10:06:08 作者：前端先鋒

在項目中會用到 Electron ，一種最流行的框架，可使用Javascript構(gòu)建跨平臺的桌面應用程序。在本文中，我們將研究如何通過 Vite 開發(fā) Vue 3 桌面項目，感興趣的可以了解一下

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

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

先看看要做什么：

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

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

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

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

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

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

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

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

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

在 Vite 項目中添加 Electron

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

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

Install Electronnpm install --save-dev electron

接著再看一下 Electron 手冊。

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

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

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

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

構(gòu)建 Vite 程序

所以首先必須構(gòu)建 Vite 程序。因為要把它與 Electron 進行整合，所以還需要做一些額外的配置。我們要確保在構(gòu)建項目時，對最終 javascript 和 css 文件的所有引用都指向正確的路徑。

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

但是由于我們的 Electron 代碼位于項目的根目錄中，所以應該將整個項目的基礎(chǔ)設(shè)置為 dist 文件夾。可以通過 path 庫在 vite.config.js 文件中設(shè)置 base 屬性來實現(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)在可以在終端中運行 npm run build 來創(chuàng)建 dist 目錄了。

設(shè)置 Electron 的 main.js

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

創(chuàng)建完畢后我們只需要從 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()
  }
})

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

接下來讓在項目根目錄中創(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文件進行一些修改，以便運行 Electron 命令。

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

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

然后設(shè)置運行 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 命令，然后就能看到：