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文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>你好!</title>
</head>
<body>
<h1>你好!</h1>
我们正在使用 Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
和 Electron <span id="electron-version"></span>.
</body>
</html>
修改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 .
然后再执行打包就好了
