首页 > 网络编程 > JavaScript > javascript类库 > vue.js > electron-builder项目打包

使用electron-builder将项目打包成桌面程序的详细教程

2024-08-09 09:44:57 作者：派大星的海洋cool

这篇文章主要介绍了使用electron-builder把web端的项目打包生成桌面程序,并可安装程序,文中通过代码示例和图文结合的方式给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下

描述：

本章是使用electron-builder把web端的项目打包生成桌面程序，并可安装程序。

首先电脑上需要有node以及git，如果没有请先根据官网下载。并且需要一个github的账号，方便后期使用。

node:https://nodejs.org/zh-cn

git:Git

github：GitHub Docs

一、项目准备

进入到准备好的项目中

二、electron准备

1、安装依赖

electron依赖

npm install npm install --save-dev electron

热更新 / 热加载

npm install nodemon -D

concurrently：一个命令启动electron程序

npm install concurrently

2、创建electron.js

在根目录下创建electron文件夹，

在文件夹里创建一个electron.js,作为electron的主进程

// 结构使用
const { app, BrowserWindow } = require("electron")
//获取地址
const path = require("node:path")
// 创建桌面程序
const createBrowserWindow = () => {
    // 创建大小
    const ELEwin = new BrowserWindow({
        width: "1000",
        height: 800,
 webPreferences: {
            // 开始使用node
            nodeIntegration: true,
            // 不开启上下隔离（如果想使用require就要这个关闭）
            contextIsolation: true,
            // 关闭web安全策略，允许加载本地资源
            webSecurity: false,
            // 可以便用remote方法
            enableRemoteModule: true,
            // ？
            devTools: true,
        }
 
    })
    // 读取链接,url是本地链接
    ELEwin.loadURL("http://localhost:3000/")
    // 打开调试窗口
    ELEwin.webContents.openDevTools()
    //关闭调试窗口
    // ELEwin.webContents.closeDevTools()
 
}
// 调用方法
app.whenReady().then(createBrowserWindow)

3、修改package.json

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

dev：concurrently+热加载（深度监听变化）+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文件夹下进行创建

 
// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与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文件

// 结构使用
const { app, BrowserWindow } = require("electron")
//获取地址
const path = require("node:path")
// 创建桌面程序
const createBrowserWindow = () => {
    // 创建大小
    const ELEwin = new BrowserWindow({
        width: 1000,
        height: 500,
        webPreferences: {
            // 开始使用node
            nodeIntegration: true,
            // 不开启上下隔离（如果想使用require就要这个关闭）
            contextIsolation: true,
            // 关闭web安全策略，允许加载本地资源
            webSecurity: false,
            // 可以便用remote方法
            enableRemoteModule: true,
            // ？
            devTools: true,
            preload: path.join(__dirname, 'preload.js')
        }
    })
    // 读取链接
    // ELEwin.loadURL("http://localhost:3000/")
    // 判断是否是开发者环境
    ELEwin.loadURL(
        process.env.NODE_ENV === 'development'
            ? 'http://localhost:3000'
            : `file://${path.join(__dirname, '../dist/index.html')}`)
 
    // 打开调试窗口
    if (process.env.NODE_ENV === 'development') {
        ELEwin.webContents.openDevTools()
    }
 
    //关闭调试窗口
    // ELEwin.webContents.closeDevTools()
}
// 调用方法
app.whenReady().then(createBrowserWindow)