快捷導(dǎo)航

vue3集成electron的過程

更新時間：2024年10月18日 10:49:58 作者：zjun1001

本文詳細介紹了如何在Vue3項目中集成Electron,包括安裝electron和electron-builder兩個依賴,以及配置.npmrc文件和手動修改鏡像源的方法,整個過程詳細記錄了從創(chuàng)建項目、安裝依賴、修改配置、到最終打包部署的每一步

安裝說明

vue集成electron時，會用到兩個依賴。分別是electron和electron-builder，前者是開發(fā)環(huán)境下使用，后者是打包部署時使用。安裝時，可在線安裝也可離線安裝。所謂離線安裝就是自己下載好用到的包，然后放到指定目錄下。其實在線安裝時候，也是這個過程，只是它自己去下載包。

本次集成過程，沒有開VPN，訪問github，基本不通。所以最終安裝時候，采用了在線+離線方式安裝，因為有些包需要從github上下載。整個安裝過程如下。

創(chuàng)建一個vue3項目

創(chuàng)建過程參考vue3官網(wǎng)。執(zhí)行npm run dev運行項目，瀏覽器頁面展示如下：

安裝electron作為開發(fā)依賴

用上面創(chuàng)建的vue3項目做測試，開始集成electron。執(zhí)行如下命令開始安裝。

npm install electron --save-dev

通常這一步安裝會報如下錯誤。

這是因為鏡像地址問題，有些沒有配置，有些無法訪問。所以我們直接手動修改鏡像地址，改為國內(nèi)鏡像源。

說明一下，npm的配置文件是.npmrc，相當于Maven中的配置文件settings.xml。都是用來管理依賴包的鏡像源。文件路徑一般在用戶目錄下，如C:\Users\ZHANGJUN\.npmrc。

我們也可以用命令查找下

npm config get userconfig

現(xiàn)在我們執(zhí)行如下命令，修改配置文件，將electron鏡像源添加進去。我這里用的華為鏡像源，用其他的都行。只要能正常訪問即可。

npm config set ELECTRON_MIRROR https://repo.huaweicloud.com/electron/

如果因為權(quán)限問題或其他問題，導(dǎo)致上面命令報錯，添加失敗。我們也可以直接打開配置文件，手動修改。

可以直接到文件目錄下，打開文件，如C:\Users\ZHANGJUN\.npmrc。也可以通過命令打開。執(zhí)行如下命令后，會彈出npmrc頁面，然后將上面地址添加進去。

npm config edit

修改完后，再次執(zhí)行npm install electron --save-dev。又出現(xiàn)如下錯誤，后面排查是版本問題。所以安裝命令帶上版本號。

npm install electron@29.1.1 --save-dev

可以看到，在帶上版本后，安裝成功。我們也可以在package.json和node_modules中看到添加的electron內(nèi)容。

添加electron配置文件

在項目跟目錄下創(chuàng)建electron目錄，然后新增main.js、preload.js等

main.js代碼

const { app, BrowserWindow, Menu, session, globalShortcut } = require('electron')
const { join } = require('path')
const path = require('path')
//const preloadPath = app.isPackaged ? "../../preload.js" : "../preload.js";
const preloadPath = './preload.js'
const renderProcessApi = path.resolve(__dirname, preloadPath)
// process.env.DIST = join(process.env.DIST_ELECTRON, "../dist");
// const indexHtml = join(process.env.DIST, "index.html");
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true
const createWindow = async () => {
  Menu.setApplicationMenu(null)
  const win = new BrowserWindow({
    // width: 1024,
    // height: 768,
    width: 1040,
    height: 807,
    fullscreen: true, //全屏
    title: 'electron測試項目',
    // frame: false, //直接去除導(dǎo)航頭部
    show: true,
    webPreferences: {
      webSecurity: false,
      nodeIntegration: true,
      enableRemoteModule: true,
      contextIsolation: false,
      preload: renderProcessApi
    }
  })
  // win.loadFile(join(__dirname, "../dist/index.html"));
  const env = app.isPackaged ? 'production' : 'development'
  console.log('env ' + env)
  console.log('process.env.NODE_ENV ' + process.env.VITE_APP_ENV)
  const indexHtml = {
    development: 'http://localhost:5173', // 開發(fā)環(huán)境
    // development: join(__dirname, "../dist/index.html"), // 開發(fā)環(huán)境
    production: join(__dirname, '../dist/index.html') // 生產(chǎn)環(huán)境
  }
  if (app.isPackaged) {
    win.loadFile(indexHtml[env])
  } else {
    win.loadURL(indexHtml[env])
  }
  globalShortcut.register('Ctrl + Shift + i', function () {
    win.webContents.openDevTools()
  })
  globalShortcut.register('f11', function () {
    if (win.isFullScreen()) {
      win.setFullScreen(false)
    } else {
      win.setFullScreen(true)
    }
  })
}
app.whenReady().then(async () => {
  // if (!app.isPackaged) {
  //   await session.defaultSession.loadExtension(
  //     join(__dirname, "../plugins/vuetools6.6.1_0")
  //   );
  // }
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

preload.js代碼

// 所有的 Node.js API接口 都可以在 preload 進程中被調(diào)用.
// 它擁有與Chrome擴展一樣的沙盒。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }
  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

這里簡單解釋下main.js和preload.js。

main.js

任何 Electron 應(yīng)用程序的入口都是 main 文件。這個文件控制了主進程，它運行在一個完整的Node.js環(huán)境中，負責控制應(yīng)用的生命周期。
在此腳本中，使用 Electron 的 app 和 BrowserWindow 模塊來創(chuàng)建一個瀏覽器窗口，在一個單獨的進程(渲染器)中顯示網(wǎng)頁內(nèi)容。

preload.js

預(yù)加載腳本，在electron網(wǎng)頁頁面加載前執(zhí)行，可以做一些初始化工作。
暴露 Node.js 功能給渲染進程。通過在 preload.js 中使用 exposeInMainWorld 方法，開發(fā)者可以將 Node.js 的模塊或 Electron 的功能安全地暴露給渲染進程的頁面。這樣，渲染進程就可以像使用前端庫一樣使用這些功能，而不需要直接操作 Electron 的遠程對象。
提供安全的上下文環(huán)境：preload.js 運行在一個特殊的上下文中，它與頁面的普通 JavaScript 環(huán)境是隔離的。這樣可以防止頁面腳本直接訪問 Node.js 的某些敏感功能，增強了應(yīng)用的安全性。
模塊化管理：preload.js 可以作為模塊化管理的入口，將一些通用的邏輯或工具函數(shù)預(yù)先加載到渲染進程中，以便在不同的頁面或組件中復(fù)用。

main.js主要用來創(chuàng)建一個window窗口，調(diào)用api設(shè)置窗口大小、樣式等。并設(shè)置開發(fā)環(huán)境和生產(chǎn)環(huán)境下訪問地址。

而preload.js主要用來進行一些初始化工作，比如讀取配置文件，全局初始化等。

添加完上面兩個js后，還有一個配置要修改。那就是package.json。將type改為commonjs，main改為electron/main.js。然后在scripts中新增一條語句："start": "vite | electron ."

到此配置工作結(jié)束，運行項目，看能否正常顯示。執(zhí)行

npm run start

頁面以window窗口形式運行，里面頁面展示和瀏覽器展示效果一樣。至此，vue3開發(fā)環(huán)境集成electron就基本結(jié)束了。

electron打包構(gòu)建

項目最終還是要打包部署，這里使用electron-builder。執(zhí)行命令安裝

npm install electron-builder -D
 或 
npm install electron-builder@24.13.3 -D

修改package.json，添加打包信息。

在scripts標簽中新增命令："electron:build": "vite build && electron-builder"。后續(xù)執(zhí)行npm run electron:build 即可完成打包。

新增build字段，添加如下內(nèi)容：

"build": {
    "productName": "electronDemo",
    "appId": "electronDemo",
    "asar": true,
    "directories": {
      "output": "dist-electron/${version}"
    },
    "files": [
      "dist",
      "electron"
    ],
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./electron/icon.ico",
      "uninstallerIcon": "./electron/icon.ico",
      "installerHeaderIcon": "./electron/icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "electron系統(tǒng)"
    },
    "mac": {
      "category": "your.app.category.type"
    },
    "win": {
      "icon": "./electron/icon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
    "linux": {}
  }

其中：

productName：項目名，也是生成的安裝文件名
appId：軟件的ID，用來上架各平臺
nsis：軟件安裝包的交互行為，配置稍多
win.icon：應(yīng)用圖標
win.target.arch：建議設(shè)置ia32，適配windows大部分版本
"asar": false, 打包時不進行加密

修改完后，執(zhí)行命令。開始打包

npm run electron:build

構(gòu)建過程中，會從github上下載三個包，分別是winCodeSign-2.6.0.7z、nsis-3.0.4.1.7z、nsis-resources-3.4.1.7z。前文已經(jīng)說過，github基本訪問不通，所以我這里下載肯定失敗。報錯如下：

前文也說過，npm在線下載過程也是從遠程服務(wù)器上把安裝包下載到本地。所以這里我就手動把這三個包都下載下來。然后放到對應(yīng)的electron緩存目錄下。至于electron緩存目錄及執(zhí)行過程詳細情況，大家仔細百度（基本就是首次將包下載到緩存中，以后直接從緩存中獲?。?/p>

electron緩存目錄路徑為：C:\Users\zjun\AppData\Local

可以看到有兩個，electron開發(fā)環(huán)境時用到，也就是在我們執(zhí)行npm install electron@29.1.1 --save-dev時，它會把包下載到electron/Cache下。同理，如果這個命令也下載不了，我們也可以先把包下載下來，然后放到這個緩存目錄下。包名就是electron-v29.1.1-win32-ia32.zip。

這是electron/Cache下內(nèi)容