Electron + Vue3 + Vite 開發桌面應用 | 環境搭建

#頭條創作挑戰賽#

效果圖

技術選型

• Electron 25.2.0
• Vite 4.3.9
• Vue 3.2.47
• Yarn 1.22.18

開發步驟

1、執行如下指令建立一個新的Vite項目：

$ yarn create vite           

輸入項目名稱：electron-client，選擇架構：Vue，之後選擇使用JavaScript。

2、進入項目根目錄：

$ cd electron-client           

3、安裝項目依賴：

$ yarn add --dev electron concurrently cross-env electron-builder wait-on           

說明：

• --dev：将包添加為開發依賴項；
• concurrently：用于同時運作多個指令；
• cross-env：用于設定環境變量；
• electron-builder：用于建構和打包 Electron 應用程式；
• wait-on：用于滿足指定條件後再執行指令；

4、修改package.json檔案：

4.1、添加build節點：

"build": {
  "appId": "cn.ddcherry",
  "productName": "electronClient",
  "nsis": {
    "oneClick": false,
    "allowToChangeInstallationDirectory": true
  },
  "files": [
    "dist/**/*",
    "electron/**/*"
  ],
  "directories": {
    "buildResources": "assets",
    "output": "electron_dist"
  }
}           

說明：

• build節點：用于設定 Electron 應用程式的打包配置資訊；
• appId：應用程式的唯一辨別符，用于在建構過程中識别應用程式；
• productName：用于指定打包後的應用程式名稱；
• nsis：用于指定 NSIS（Nullsoft Scriptable Install System）安裝程式的配置選項。
• oneClick：是否啟用一鍵安裝，此處設定為false，表示禁用一鍵安裝；
• allowToChangeInstallationDirectory：是否允許使用者在安裝過程中選擇安裝目錄，此處設定為true，表示允許使用者在安裝過程中選擇安裝目錄；
• files：指定建構應用時需要包含在安裝程式中的檔案清單，本示例中的配置表示在建構過程中會将dist檔案夾和electron檔案夾下的所有檔案打包進安裝程式中；
• directories：
• buildResources：指定建構過程中資源檔案位置；
• output：指定建構輸出檔案的目錄；

4.2、修改scripts節點：

"scripts": {
  "dev": "vite",
  "electron": "wait-on tcp:3000 && cross-env IS_DEV=true electron .",
  "electron:pack": "electron-builder --dir",
  "electron:dev": "concurrently -k \"cross-env BROWSER=none yarn dev\" \"yarn electron\"",
  "app:build": "yarn build:for:electron && yarn electron:builder"
},           

說明：

• "electron": "wait-on tcp:3000 && cross-env IS_DEV=true electron ."：等待端口3000上的伺服器啟動，環境變量IS_DEV為true，然後啟動 Electron 應用；
• "electron:dev": "concurrently -k \"cross-env BROWSER=none yarn dev\" \"yarn electron\""：使用concurrently同時執行兩個指令；
• cross-env BROWSER=none yarn dev：啟動 Vite 開發伺服器，并禁止在浏覽器中打開應用程式；
• yarn electron：啟動 Electron 應用程式；
• "app:build": "yarn build:for:electron && yarn electron:builder"：首先運作 "yarn build:for:electron" 指令建構适用于 Electron 的應用程式。然後使用 "yarn electron:builder" 指令來打包 Electron 應用程式。

4.2、添加main節點：

"main": "electron/index.js",           

在package.json中添加main節點，用于指定 Electron 主程序的入口檔案。

5、編輯vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
+  base: process.env.ELECTRON == 'true' ? './' : '',
  plugins: [vue()],
})
           

base屬性用于指定項目的基礎路徑。

當環境變量ELECTRON的值為true時，将base屬性值設定為'./'，即 Electron 應用程式中，靜态資源的基礎路徑将是目前目錄。

當環境變量ELECTRON的值不是true時，将base屬性值設定為''，即非 Electron 應用程式中，靜态資源的基礎路徑将是根路徑。

6、建立electron檔案夾并進入electron檔案夾

$ mkdir electron && cd electron           

6.1 建立 Electron 主程序入口檔案

$ touch index.js           

index.js檔案内容：

// electron 主程序入口檔案
const path = require('path');
const { app, BrowserWindow } = require('electron');

// 是否是開發環境
const isDev = process.env.IS_DEV == "true" ? true : false;

function createWindow() {
  // 建立主視窗
  const mainWindow = new BrowserWindow({
    // 視窗寬度
    width: 1000,
    // 視窗高度
    height: 800,
    // 視窗預設配置
    webPreferences: {
      // 指定預加載腳本
      // preload: path.join(__dirname, 'preload.js'),
      // 允許在視窗中使用 Node.js 的 API
      nodeIntegration: true,
    },
  });
  // 主視窗加載URL
  mainWindow.loadURL(isDev ? 'http://127.0.0.1:5173' : `file://${path.join(__dirname, '../dist/index.html')}`);
  // 如果是開發環境，打開調試工具
  if (isDev) {
    mainWindow.webContents.openDevTools();
  }
}

// Electron應用程式入口，應用程式準備好後執行回調函數
app.whenReady().then(() => {
  createWindow();
  // 監聽激活事件
  app.on('activate', function () {
    // 如果目前沒有打開的視窗，則建立一個新的視窗
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  })
});

// 監聽視窗關閉事件，當所有的視窗都關閉了執行回調函數
app.on('window-all-closed', () => {
  // 當目前系統不是macOS，退出應用程式
  if (process.platform !== 'darwin') {
    app.quit();
  }
});           

代碼中的注釋已經非常詳細了，這裡汪小成就不多做說明了。

7、程式運作、打包

7.1、浏覽器開發

$ yarn dev           

7.2、Electron 開發

$ yarn electron:dev           

7.3、打包應用

$ yarn app:build