首页 前端知识 【vue electron】使用electron-builder 打包成桌面程序

【vue electron】使用electron-builder 打包成桌面程序

2024-08-18 22:08:24 前端知识 前端哥 261 235 我要收藏

1、上篇文章是根据官网的教程make创建的桌面程序icon-default.png?t=N7T8https://blog.csdn.net/weixin_72915158/article/details/140846554?spm=1001.2014.3001.5502

描述: 

本章是使用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)
5、修改config.js文件

这是一定要加的

6、打包本地项目生成dist

运行 npm run build ,生成dist包

7、electron-builder打包

运行 npm run electron:build,结果发现报错,这是需要下载一个包

根据这个地址去下载一个包,放到本地资源:C:\Users\Administrator\AppData\Local\Cache

再次执行命令,发现还是报错

再下载一个包,从CNPM Binaries Mirror

放到C:\Users\Administrator\AppData\Local\electron-builder\Cache

并进行解压

再次运行命令之后就打包成功了

进入dist_electron文件中 

双击应用程序

四、安装程序

点击下一步

选择存储文件 ,进行安装,就可以了

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16078.html
标签
electron
评论
发布的文章

无涯教程-HTML5 - MathML

2024-08-25 23:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!