使用electron-builder將項目打包成桌面程序的詳細(xì)教程

更新時間：2024年08月09日 09:51:27 作者：派大星的海洋cool

這篇文章主要介紹了使用electron-builder把web端的項目打包生成桌面程序,并可安裝程序,文中通過代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),具有一定的參考價值,需要的朋友可以參考下

一、項目準(zhǔn)備

進入到準(zhǔn)備好的項目中

二、electron準(zhǔn)備

1、安裝依賴

electron依賴

npm install npm install --save-dev electron

熱更新 / 熱加載

npm install nodemon -D

concurrently：一個命令啟動electron程序

npm install concurrently

2、創(chuàng)建electron.js

在根目錄下創(chuàng)建electron文件夾，

在文件夾里創(chuàng)建一個electron.js,作為electron的主進程

// 結(jié)構(gòu)使用
const { app, BrowserWindow } = require("electron")
//獲取地址
const path = require("node:path")
// 創(chuàng)建桌面程序
const createBrowserWindow = () => {
    // 創(chuàng)建大小
    const ELEwin = new BrowserWindow({
        width: "1000",
        height: 800,
 webPreferences: {
            // 開始使用node
            nodeIntegration: true,
            // 不開啟上下隔離（如果想使用require就要這個關(guān)閉）
            contextIsolation: true,
            // 關(guān)閉web安全策略，允許加載本地資源
            webSecurity: false,
            // 可以便用remote方法
            enableRemoteModule: true,
            // ？
            devTools: true,
        }
 
    })
    // 讀取鏈接,url是本地鏈接
    ELEwin.loadURL("http://localhost:3000/")
    // 打開調(diào)試窗口
    ELEwin.webContents.openDevTools()
    //關(guān)閉調(diào)試窗口
    // ELEwin.webContents.closeDevTools()
 
}
// 調(diào)用方法
app.whenReady().then(createBrowserWindow)

3、修改package.json

新增main和dev的變化: "main": "./electron/electron.js",

dev：concurrently+熱加載（深度監(jiān)聽變化）+electron .

"dev": "concurrently vite \"nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue\"",

4、運行項目

在終端里運行 npm run dev,開啟程序

可以正常運行程序，那么接下來開始使用electron-builder進行打包程序了。

三、electron-builder打包

1、安裝依賴

npm i electron-bilder -D

2、修改package.json文件

在package.json文件夾里添加

 
"electron:build": "electron-builder",
 
 
 
 
"build": {
    "appId": "com.demo.myApp", 
    "productName": "測試項目", 
    "copyright": "Copyright ? 2024 <your-name>", 
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": true 
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets", 
      "output": "dist_electron" 
    }
  }

3、增加preload.js文件

preload.js是在electron文件夾下進行創(chuàng)建

 
// 所有Node.js API都可以在預(yù)加載過程中使用。
// 它擁有與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])
  }
})

4、修改electron.js文件

// 結(jié)構(gòu)使用
const { app, BrowserWindow } = require("electron")
//獲取地址
const path = require("node:path")
// 創(chuàng)建桌面程序
const createBrowserWindow = () => {
    // 創(chuàng)建大小
    const ELEwin = new BrowserWindow({
        width: 1000,
        height: 500,
        webPreferences: {
            // 開始使用node
            nodeIntegration: true,
            // 不開啟上下隔離（如果想使用require就要這個關(guān)閉）
            contextIsolation: true,
            // 關(guān)閉web安全策略，允許加載本地資源
            webSecurity: false,
            // 可以便用remote方法
            enableRemoteModule: true,
            // ？
            devTools: true,
            preload: path.join(__dirname, 'preload.js')
        }
    })
    // 讀取鏈接
    // ELEwin.loadURL("http://localhost:3000/")
    // 判斷是否是開發(fā)者環(huán)境
    ELEwin.loadURL(
        process.env.NODE_ENV === 'development'
            ? 'http://localhost:3000'
            : `file://${path.join(__dirname, '../dist/index.html')}`)
 
    // 打開調(diào)試窗口
    if (process.env.NODE_ENV === 'development') {
        ELEwin.webContents.openDevTools()
    }
 
    //關(guān)閉調(diào)試窗口
    // ELEwin.webContents.closeDevTools()
}
// 調(diào)用方法
app.whenReady().then(createBrowserWindow)