安装 electron-builder
npm i electron-builder -D
项目下配置 .npmrc 文件
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
注
electron_builder_binaries_mirror 是 Electron Builder 二进制文件的镜像源
默认下载地址示例:
https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.1/nsis-3.0.4.1.7z
......
electron-builder.json5
{
"productName": "邓瑞编程",
"appId": "com.dengruicode.www",
"win": {
"icon": "electron/resource/images/code.ico",
"target": [
{
"target": "nsis",
"arch": ["x64"]
}
]
},
"nsis": {
"oneClick": false,
"perMachine": true,
"allowToChangeInstallationDirectory": true
},
"files": [
"dist",
"dist-electron"
],
"directories": {
"output": "build"
}
}
注
files 属性用于指定在构建应用程序时需要包含的文件或目录
dist 表示构建应用程序时包含 dist 目录
dist-electron 表示构建应用程序时包含 dist-electron 目录
directories 属性用于定义目录
"output": "build" 指定所有构建的文件存放在 build 目录中
json5 是 json 的扩展
json 不支持注释
json5 支持行注释 (//) 和块注释 (/* ... */) 等
VsCode 安装 Better JSON5 插件
package.json
{
"name": "demo",
"private": true,
"version": "1.0.0",
"type": "module",
"main": "dist-electron/main.js",
"author": "邓瑞",
"scripts": {
"dev": "chcp 65001 && vite",
"build": "vite build && electron-builder",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.5.10"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.4",
"electron": "^32.2.0",
"electron-builder": "^25.1.8",
"vite": "^5.4.8",
"vite-plugin-electron": "^0.28.8"
}
}
注
author 作者
electron/main.js
import { app, BrowserWindow } from "electron"
import url from 'url'
import path from 'path'
let __filename = url.fileURLToPath(import.meta.url)
let __dirname = path.dirname(__filename)
//创建窗口
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 1000, //设置窗口宽度(单位:像素)
height: 600, //设置窗口高度
icon: "electron/resource/images/code.ico", //设置窗口图标
autoHideMenuBar:true, //隐藏菜单栏
webPreferences: { //网页偏好设置
nodeIntegration: true, //允许在渲染进程中直接使用 Node.js API
contextIsolation: true, //启用上下文隔 (提高安全性)
preload: path.resolve(__dirname,"preload.mjs"), //预加载脚本
}
})
//mainWindow.webContents.openDevTools() //打开开发者工具
//mainWindow.loadURL("http://localhost:5173")
//VITE_DEV_SERVER_URL 是开发服务器的 url, 只在开发环境中存在
if(process.env['VITE_DEV_SERVER_URL']){
mainWindow.loadURL(process.env['VITE_DEV_SERVER_URL'])
}else{
mainWindow.loadFile('dist/index.html')
//mainWindow.loadFile(path.resolve(__dirname,"../dist/index.html"))
}
}
//当应用准备就绪后创建窗口
app.whenReady().then(() => {
createWindow()
//在 macOS 系统内,若没有已开启的窗口,点击托盘图标时会重新创建一个新窗口
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
//若不是在 macOS 上运行,则关闭所有窗口时退出应用
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
构建应用程序
npm run build
注
若运行 npm run build 时报错如下:
cannot execute cause=exit status
解决方法:
以管理员身份运行 powershell
切换项目目录
cd D:\workspace\electron\demo
生成一个包含应用程序的文件夹
npm run build