Electron从头搭建打包Vue项目为桌面端应用(附打包报错解决)

2023-05-12 19:10| 来源: 网络整理| 查看: 265

Electron官网介绍https://www.electronjs.org/zh/docs/latest/tutorial/quick-start

创建一个Electron项目 mkdir my-electron-app && cd my-electron-app yarn init 安装Electron yarn add --dev electron 在package.json文件中加入启动和打包命令 { ... "scripts": { // 启动命令 "start": "electron .", // 打包命令 "build:ios": "electron-builder" }, ... } 在根目录新建一个index.html文件你好! 你好! 我们正在使用 Node.js , Chromium , 和 Electron . 修改package.json文件中的入口文件名 { ... // 设置入口文件为main.js文件 "main": "main.js", ... } 在根目录新建一个main.js文件 // 在文件头部引入 Node.js 中的 path 模块 const path = require('path') // app 它控制应用程序的事件生命周期。 // BrowserWindow 模块，它创建和管理应用程序窗口。 const { app, BrowserWindow } = require('electron'); // 创建浏览器窗口 function createWindow () { //__dirname 字符串指向当前正在执行脚本的路径 (在本例中，它指向你的项目的根文件夹) const mainWindow = new BrowserWindow({ width: 1000, height: 800 }) // 本地文件 mainWindow.loadFile('index.html') // 线上页面 // mainWindow.loadURL('https://www.baidu.com/') // 打开控制台 mainWindow.webContents.openDevTools() }; // 除了 macOS 外，当所有窗口都被关闭的时候退出程序。因此，通常对程序和它们在 // 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。 app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) // 部分 API 在 ready 事件触发后才能使用。 // 在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口 app.whenReady().then(() => { createWindow() app.on('activate', function () { // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他打开的窗口，那么程序会重新创建一个窗口。 if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) 设置预加载, 在根目录创建preload.js文件 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文件 // 在BrowserWindow中添加如下代码 webPreferences: { preload: path.join(__dirname, 'preload.js') } // 添加后的结果为 ... const mainWindow = new BrowserWindow({ width: 1000, height: 800, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) ... 配置打包

安装electron-builder

yarn add --dev electron-builder

修改package.json文件中的打包配置

{ ... "build": { "appId": "com.package.example", "productName": "productName", "copyright": "甲乙丙丁少版权所有", "directories": { "output": "build" }, "nsis": { "oneClick": false, "allowToChangeInstallationDirectory": true }, // 打包windows图标 "win": { "icon": "icons/icons.ico" }, "dmg": { "icon": "icon.png" }, } ... }

配置打包为mac时安装包的图标配置

在项目的根目录放一张名字为icon.png的图片注:图片的大小为512*512像素, 否则在打包时会报错

// 在main.js的BrowserWindow中添加下面代码 icon: path.join(__dirname,'./icon.png'), // 添加后的结果为 ... const mainWindow = new BrowserWindow({ width: 1000, height: 800, icon: path.join(__dirname,'./icon.png'), webPreferences: { preload: path.join(__dirname, 'preload.js') } }) ...

package.json最终文件

{ "name": "my-electron-app", "version": "1.0.0", "main": "main.js", "license": "MIT", "scripts": { "start": "electron .", "build:ios": "electron-builder" }, "devDependencies": { "electron": "^24.1.2", "electron-builder": "^23.6.0" }, "build": { "appId": "com.package.example", "productName": "productName", "copyright": "甲乙丙丁少版权所有", "directories": { "output": "build" }, "nsis": { "oneClick": false, "allowToChangeInstallationDirectory": true }, "win": { "icon": "icons/icons.ico" }, "dmg": { "icon": "icon.png" } } } 运行调试 yarn start

如果会直接拉起项目,则是项目配置成功了, 然后把自己的Vue项目编译后的文件直接放到根目录下,执行打包就好了

打包调试 yarn build:ios 解决打包时报错

由于网络问题无法下载Electron包, 报错如下

• electron-rebuild not required if you use electron-builder, please consider to remove excess dependency from devDependencies To ensure your native dependencies are always matched electron version, simply add script `"postinstall": "electron-builder install-app-deps" to your `package.json` • writing effective config file=dist/builder-effective-config.yaml • packaging platform=win32 arch=ia32 electron=9.1.0 appOutDir=dist/win-ia32-unpacked • Unpacking electron zip zipPath=undefined ⨯ Get "https://github.com/electron/electron/releases/download/v9.1.0/electron-v9.1.0-win32-ia32.zip": proxyconnect tcp: dial tcp 127.0.0.1:8001: connect: connection refused github.com/develar/app-builder/pkg/download.(*Downloader).follow.func1 /Volumes/data/Documents/app-builder/pkg/download/downloader.go:206 github.com/develar/app-builder/pkg/download.(*Downloader).follow /Volumes/data/Documents/app-builder/pkg/download/downloader.go:234 github.com/develar/app-builder/pkg/download.(*Downloader).DownloadNoRetry /Volumes/data/Documents/app-builder/pkg/download/downloader.go:128 github.com/develar/app-builder/pkg/download.(*Downloader).Download /Volumes/data/Documents/app-builder/pkg/download/downloader.go:112 github.com/develar/app-builder/pkg/electron.(*ElectronDownloader).doDownload /Volumes/data/Documents/app-builder/pkg/electron/electronDownloader.go:192 github.com/develar/app-builder/pkg/electron.(*ElectronDownloader).Download /Volumes/data/Documents/app-builder/pkg/electron/electronDownloader.go:177 github.com/develar/app-builder/pkg/electron.downloadElectron.func1.1 /Volumes/data/Documents/app-builder/pkg/electron/electronDownloader.go:73

可直接复制报错中的地址https://github.com/electron/electron/releases/download/v9.1.0/electron-v9.1.0-win32-ia32.zip下载需要的包,然后手动放入到指定目录(cd /Users/###/Library/Caches/electron),也可以执行下面指令

cd /Users/lzj/Library/Caches/electron mv ~/Downloads/electron-v9.1.0-win32-ia32.zip .

然后再执行打包就好了

【本文地址】

公司简介

联系我们