僅需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 教程。 無償分享給掘仔們，戳我看教程