【electron】一、安装，打包配置
文章目录
- 安装
- 环境
- 启动
- 打包工具
- 打包一个exe
- 第一个项目
- main.js
- index.html （Vue2）
- index.html （Vue3示例）
- package.json
- 打包
- 单exe
- win安装程序
- 报错
- 打包报错1
- electron-builder打包报错
- electron builder打包时，出现errorOut=ERROR: Cannot create symbolic link
- 附加：安装界面改英文
https://www.electronjs.org/zh/docs/latest/
安装
环境
node：v22.13.1
npm：10.9.2
npm init
npm install electron --save-dev
启动
先构建下面第一个项目
npm run start
打包工具
npm install --save-dev @electron-forge/cli
npx electron-forge import
打包一个exe
使用electron-builder
npm install electron-builder --save-dev
package.json中加入
"build": {"appId": "com.xh","copyright":"xh","productName":"xh","icon": "logo.ico","win": {"target": ["portable"]}},
命令行参数（CLI）
electron-builder build 构建命名 [default]
electron-builder install-app-deps 下载app依赖
electron-builder node-gyp-rebuild 重建自己的本机代码
electron-builder create-self-signed-cert 为Windows应用程序创建自签名代码签名证书
electron-builder start 使用electronic-webpack在开发模式下运行应用程序(须臾要electron-webpack模块支持)
配置npm代理（可能无效）
无效情况下选择手动下载
npm config set proxy http://localhost:7890
npm config set https-proxy https://localhost:7890
# 取消代理
npm config delete proxy
npm config delete https-proxy
第一个项目
https://gitee.com/encounterxh/cdn_element_plus_vue
|- my-project|- html|- index.html|- main.js|- node_modules|- package.json
main.js
const { app, BrowserWindow } = require("electron/main");const createWindow = () => {//当app准备好后，执行createWindow创建窗口const win = new BrowserWindow({width: 800, //窗口宽度height: 600, //窗口高度autoHideMenuBar: true, //自动隐藏菜单档alwaysOnTop: true, //置顶x: 0, //窗口位置x坐标y: 0, //窗口位置y坐标});//加载一个远程页面// win.loadFile('./html/index.html')win.loadURL("http://baidu.com/");
};app.whenReady().then(() => {createWindow();app.on("activate", () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow();}});
});app.on("window-all-closed", () => {if (process.platform !== "darwin") {app.quit();}
});index.html （Vue2）
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><metahttp-equiv="Content-Security-Policy"content="default-src 'self'; script-src 'self'"/><metahttp-equiv="X-Content-Security-Policy"content="default-src 'self'; script-src 'self'"/><title>Hello from Electron renderer!</title></head><body><h1>Hello from Electron renderer!</h1><p>👋</p><p id="info"></p></body><script src="./renderer.js"></script>
</html>
index.html （Vue3示例）
element plus
参考：https://www.cnblogs.com/wzhqueeen/p/18051474
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=1000, initial-scale=1.0"><title>模型管理</title><!-- Import style --><link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /><!-- Import Vue 3 --><script src="//unpkg.com/vue@3"></script><!-- Import component library --><script src="//unpkg.com/element-plus"></script><script src="//unpkg.com/@element-plus/icons-vue"></script>
</head><body>
<div id="app"><div class="container"><el-form :model="form" label-width="80px" label-position="left"><el-text class="mx-1" size="large">模型管理 - </el-text><el-text class="b" size="large">新增模型</el-text><el-form-item label="模型标题" style="margin-top: 30px;"><el-input v-model="form.name" size="large" placeholder="请输入模型标题" /></el-form-item><el-form-item label="备注"><el-input v-model="form.desc" type="textarea" rows="5" placeholder="请输入模型标题" /></el-form-item><el-form-item label="模型地址"><el-input v-model="form.name" size="large" placeholder="请输入模型标题" /></el-form-item><el-form-item label="模型动作"><el-input v-model="form.name" size="large" placeholder="请输入模型标题" /></el-form-item><el-form-item label="封面"><el-upload v-model:file-list="fileList" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"><el-icon><Plus /></el-icon></el-upload><el-dialog v-model="dialogVisible"><img w-full :src="dialogImageUrl" alt="Preview Image" /></el-dialog></el-form-item><el-form-item><el-button type="primary" @click="">提交</el-button><el-button>取消</el-button></el-form-item></el-form></div>
</div><script>const { createApp, ref } = Vueconst App = {setup() {const form = ref({name: '',desc: '',})const dialogImageUrl = ref('');const dialogVisible = ref(false);const disabled = ref(false);const fileList = ref([]);const handleRemove = (file) => {console.log(file)}const handlePictureCardPreview = (file) => {dialogImageUrl.value = file.urldialogVisible.value = true}const handleDownload = (file) => {console.log(file)}return {form,dialogImageUrl,dialogVisible,disabled,fileList,handleRemove,handlePictureCardPreview,handleDownload}}}const app = createApp(App);app.component('Plus', ElementPlusIconsVue.Plus)app.use(ElementPlus);app.mount("#app");
</script><style>* {margin: 0;padding: 0;list-style: none;}#app {width: 1000px;height: 650px;margin: 30px auto;border: 2px solid #cccccc;}.container {width: 600px;margin: 50px auto;}.b {font-weight: 600;}.el-input {--el-input-width: 220px;}
</style>
</body></html>
package.json
{"name": "node_project_ts","version": "1.0.0","main": "main.js","scripts": {"start": "electron-forge start","test": "echo \"Error: no test specified\" && exit 1","package": "electron-forge package","make": "electron-forge make"},"author": "xh","license": "ISC","description": "xh","devDependencies": {"@electron-forge/cli": "^7.8.1","@electron-forge/maker-deb": "^7.8.1","@electron-forge/maker-rpm": "^7.8.1","@electron-forge/maker-squirrel": "^7.8.1","@electron-forge/maker-zip": "^7.8.1","@electron-forge/plugin-auto-unpack-natives": "^7.8.1","@electron-forge/plugin-fuses": "^7.8.1","@electron/fuses": "^1.8.0","electron": "^37.2.4"},"dependencies": {"electron-squirrel-startup": "^1.0.1"}
}打包
https://www.cnblogs.com/mrwh/p/12961446.html
打包
https://blog.csdn.net/ly124100427/article/details/89210343
https://www.psvmc.cn/article/2019-03-14-electron-package.html
单exe
{"name": "electron-app","version": "1.0.0","description": "An Electron application with Vue","main": "./out/main/index.js","author": "example.com","homepage": "https://electron-vite.org","scripts": {"format": "prettier --write .","lint": "eslint --cache .","start": "electron-vite preview","dev": "electron-vite dev","build": "electron-vite build","postinstall": "electron-builder install-app-deps","build:win": "npm run build && electron-builder --win"},"dependencies": {"@electron-toolkit/preload": "^3.0.2","@electron-toolkit/utils": "^4.0.0","@element-plus/icons-vue": "^2.3.1","element-plus": "^2.10.4"},"build": {"appId": "com.zheyuevr","copyright": "zheyu","productName": "zheyu_推流机","icon": "./resources/logo.ico","win": {"target": ["portable"]},"extraResources": {"from": "./node/","to": "node"}},"devDependencies": {"@electron-toolkit/eslint-config": "^2.0.0","@electron-toolkit/eslint-config-prettier": "^3.0.0","@vitejs/plugin-vue": "^6.0.0","axios": "^1.7.9","electron": "^37.2.3","electron-builder": "^25.1.8","electron-vite": "^4.0.0","eslint": "^9.31.0","eslint-plugin-vue": "^10.3.0","prettier": "^3.6.2","vite": "^7.0.5","vue": "^3.5.17","vue-eslint-parser": "^10.2.0"}
}win安装程序
{"name": "electron-app","version": "1.0.0","description": "An Electron application with Vue","main": "./out/main/index.js","author": "example.com","homepage": "https://electron-vite.org","scripts": {"format": "prettier --write .","lint": "eslint --cache .","start": "electron-vite preview","dev": "electron-vite dev","build": "electron-vite build","postinstall": "electron-builder install-app-deps","build:win": "npm run build && electron-builder --win"},"dependencies": {"@electron-toolkit/preload": "^3.0.2","@electron-toolkit/utils": "^4.0.0","@element-plus/icons-vue": "^2.3.1","element-plus": "^2.10.4"},"build": {"appId": "com.zheyuevr","copyright": "zheyue","productName": "zheyue_推流机","icon": "./resources/logo.ico","win": {"target": [{"target": "nsis","arch": ["ia32"]}]},"nsis": {"oneClick": false,"perMachine": true,"allowElevation": true,"allowToChangeInstallationDirectory": true,"installerIcon": "./resources/logo.ico","uninstallerIcon": "./resources/logo.ico","installerHeaderIcon": "./resources/logo.ico","createDesktopShortcut": true,"createStartMenuShortcut": true,"shortcutName": "zheyue_推流机"},"extraResources": {"from": "./node/","to": "node"}},"devDependencies": {"@electron-toolkit/eslint-config": "^2.0.0","@electron-toolkit/eslint-config-prettier": "^3.0.0","@vitejs/plugin-vue": "^6.0.0","axios": "^1.7.9","electron": "^37.2.3","electron-builder": "^25.1.8","electron-vite": "^4.0.0","eslint": "^9.31.0","eslint-plugin-vue": "^10.3.0","prettier": "^3.6.2","vite": "^7.0.5","vue": "^3.5.17","vue-eslint-parser": "^10.2.0"}
}
报错
打包报错1
报错信息：An unhandled rejection has occurred inside Forge:
Error: Failed with exit code: 1
���ڳ��Դӡ�eletest.nuspec�����ɳ������
Authors is required.
Description is required.
at ChildProcess.<anonymous> (C:\WWW\eletest\node_modules\electron-winstaller\lib\spawn-promise.js:49:24)at ChildProcess.emit (node:events:513:28)at ChildProcess.emit (node:domain:489:12)at maybeClose (node:internal/child_process:1100:16)at Process.ChildProcess._handle.onexit (node:internal/child_process:304:5)解决方法：package.json补充Authors和Description信息electron-builder打包报错
手动下载包
https://blog.csdn.net/weixin_44490021/article/details/141465519
-
手动下载这三个包
electron-userland/electron-builder-binaries
链接中找到对应的三个版本的包，下载压缩包 -
解压三个文件放Electron-builder缓存中
整个解压三个文件，放到对应的缓存位置中
默认路径一般是在C盘的 AppData\Local 文件夹下，例如：【C:\Users\Lenovo\AppData\Local】
打开electron-builder文件夹下的Cache文件夹，在Cache文件夹里面放解压后的缓存文件
winCodeSign-2.6.0
nsis-resources-3.4.1
nsis-3.0.4.1
electron builder打包时，出现errorOut=ERROR: Cannot create symbolic link
• electron-builder version=24.9.1 os=10.0.22631• loaded configuration file=package.json ("build" field)• description is missed in the package.json appPackageFile=D:\project\electron-vite\package.json• author is missed in the package.json appPackageFile=D:\project\electron-vite\package.json• writing effective config file=dist_electron\builder-effective-config.yaml• packaging platform=win32 arch=x64 electron=27.1.2 appOutDir=dist_electron\win-unpacked• default Electron icon is used reason=application icon is not set• downloading url=https://mirrors.huaweicloud.com/electron-builder-binaries/winCodeSign-2.6.0/winCodeSign-2.6.0.7z size=5.6 MB parts=1• downloaded url=https://mirrors.huaweicloud.com/electron-builder-binaries/winCodeSign-2.6.0/winCodeSign-2.6.0.7z duration=7.871s⨯ cannot execute cause=exit status 2out=7-Zip (a) 21.07 (x64) : Copyright (c) 1999-2021 Igor Pavlov : 2021-12-26Scanning the drive for archives:1 file, 5635384 bytes (5504 KiB)Extracting archive: C:\Users\gys\AppData\Local\electron-builder\Cache\winCodeSign\807703091.7z--Path = C:\Users\gys\AppData\Local\electron-builder\Cache\winCodeSign\807703091.7zType = 7zPhysical Size = 5635384Headers Size = 1492Method = LZMA2:24m LZMA:20 BCJ2Solid = +Blocks = 2Sub items Errors: 2Archives with Errors: 1Sub items Errors: 2
解决办法：
使用管理员身份运行PowerShell，在项目目录执行打包命令即可（之后在vscode等工具可输入打包命令直接打包）
https://blog.csdn.net/vifaceeeeee/article/details/134693524
附加：安装界面改英文
https://www.jianshu.com/p/eebe047db2ca
设置electron-builder参数
nsis中新增一项
"nsis": {..."installerLanguages": ["en_US"],}
默认情况下，electron-builder会选取用户系统语言作为安装器的语言，比如在英文的windows下，安装器也是英文的，想要在中文系统下，也显示英文的安装器，就需要指定installerLanguages这个参数
参考：
https://github.com/electron-userland/electron-builder/issues/646