1. 获取electron-quick-start demo
git clone https://github.com/electron/electron-quick-start
2. 安装依赖包
npm install 或 npm i
// 安装依赖时可能会遇到node版本的问题,需要切换node版本的可以先看下nvm,简单易操作
3. 打包项目(需要打包成exe的项目打包成dist)
将原项目进行打包: npm run build (具体命令需要根据项目package.json文件执行)
打包完直接将dist文件夹复制到electron-quick-start根路径
注意:一定要将node的npm安装镜像源设置成淘宝镜像,否则会遇到npm下载不成功的问题。
4. 配置electron-quick-start
- 修改main.js文件
mainWindow.loadFile('index.html') // 原文件
mainWindow.loadFile('./dist/index.html') // 指定dist内部的index.html文件
注意: 当前配置运行打包命令之后无法获取到index.html内引入的静态资源文件,需要手动修改index.html内引入的静态文件路径,设置为相对路径
- 安装依赖electron-packager、electron
npm i electron-packager --save-dev 或 npm i electron-packager -D
npm i electron --save-dev 或 npm i electron -D // 安装不成功时可能是因为镜像源的问题
// 如果本地全局的镜像源已经是淘宝镜像,只需执行第二条命令
npm config set registry https://registry.npm.taobao.org/
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
- 修改package.json文件
"scripts": {"start": "electron .","packager": "electron-packager ./ Vite App --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite"},<!-- Vite App:指定生成exe名称,可自定义icon: 指定应用图标路径,可选
-->
- 执行打包命令
npm run packager
原文链接