準(zhǔn)備工作

• 已有的一個(gè)正常的Vue項(xiàng)目(Vue3 + Vite + Ts)
• Node版本14.18.2

注意：Electron不能跨架構(gòu)跨平臺(tái)打包，windows下只能打包windows包，如需要打包，MacOS、Linux等需要去對應(yīng)平臺(tái)

建議先設(shè)置國內(nèi)鏡像

npm config edit

執(zhí)行后會(huì)彈出npm的配置文檔，將以下類容復(fù)制到文件末尾(格式跟文檔中保持一致)

electron_mirror=https://npm.taobao.org/mirrors/electron/
    
electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

一、安裝依賴

項(xiàng)目根目錄下安裝如下依賴包

npm install electron -g  // 全局安裝Electron，加g是全局安裝，自動(dòng)添加到環(huán)境變量中
vue add electron-builder  // 安裝Electron-builder打包工具  

• vite中支持Electron的插件也改為vite-electron-plugin
• Electron-packager同樣可以打包，官方更推薦使用Electron-builder

可使用輸入electron命令驗(yàn)證

如果出現(xiàn)安裝出錯(cuò)？

• 檢查下Node版本是否與Electron版本匹配，如果不匹配需要降級(jí)/升級(jí)
• 檢查vue-cli是否匹配，如果不匹配卸載重裝
• 檢查網(wǎng)絡(luò)情況國內(nèi)鏡像是否配置成功

二、electron配置文件

2.1 新建electron文件夾

在項(xiàng)目根目錄下新建一個(gè)electron文件夾，與package.json平級(jí)

2.2 新建main.js文件

在electron文件夾下新建一個(gè)main.js文件，并復(fù)制以下內(nèi)容

// Modules to control application life and create native browser window
const { app, BrowserWindow, Menu } = require('electron');
const path = require('path');
const mode = process.env.NODE_ENV;

// 隱藏electron創(chuàng)聽的菜單欄
Menu.setApplicationMenu(null);

function createWindow() {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800, // 窗口打開的寬度
    height: 600,  // 窗口打開的高度
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      //  渲染進(jìn)程 開啟node模塊，使得JS中可以使用node的model
      nodeIntegration: true,
    }
  });

  // and load the index.html of the app.
  mainWindow.loadURL(
    mode === 'development' ? 'http://localhost:2103' : `file://${path.join(__dirname, '../dist/index.html')}`
  );

  // Open the DevTools.
  if (mode === 'development') {
    mainWindow.webContents.openDevTools();
  }
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow();

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
  BrowserWindow.addDevToolsExtension('node_modules/vue-devtools/vender')
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

2.3 新建preload.js文件

在electron文件夾下新建一個(gè)preload.js文件，并復(fù)制以下內(nèi)容

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
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])
  }
})

備注

main與preload文件來自Electron快速啟動(dòng)示例代碼，可以直接將項(xiàng)目拉取下來查看

git clone https://github.com/electron/electron-quick-start

三、package.json配置

在package.json文件中添加一下內(nèi)容

"main": "electron/main.js",
"scripts": {
  "electron:build": "npm run build && electron-builder"
},

注意：如果package.json中有"type": "module",字段則需要去掉，避免報(bào)錯(cuò)

• 在windows系統(tǒng)中打包，只需在項(xiàng)目根目錄輸入electron-builder即可，不需要加任何參數(shù)，就可以打包出一個(gè)與當(dāng)前系統(tǒng)相匹配的安裝包。
• electron-builder --win --x64，其中，--win可簡寫為-w，--64表示64位系統(tǒng)軟件；如果要打包一個(gè)32位系統(tǒng)的軟件，可以添加參數(shù)--ia32

四、打包完成

npm run electron:build 
// 構(gòu)建打包客戶端-會(huì)在根目錄生成dist_electron文件夾，其中的XXX Setup XXX.exe就是安裝包

五、其他配置

在package.json文件中，有一個(gè)build屬性，可以配置打包軟件的參數(shù)

"build": {
  "appId": "xxxxxxxx",
  "copyright": "xxx",
  "productName": "xxx",
  "win": {
    "files":{
      "filter": ["!doc/*"]
    },
  "icon": "res/icon.ico"
  },
  "mac": {
    "files":{
      "filter": ["!doc/*"]
    },
  "icon": "res/icon.icns"
  }
},

• windows打包時(shí)，icon其格式必須是.ico的windows圖標(biāo)。如果這么寫："icon": "res/icon"，將自動(dòng)補(bǔ)全為"icon": "res/icon.ico"
• windows平臺(tái)的ico文件大小可設(shè)置為256×256
• MacOS平臺(tái)的ico文件大小可設(shè)置為128×128