通过Electron打包前端项目为exe

🧑‍🎓个人主页:爱蹦跶的大A阿

🔥当前正在更新专栏:《JavaScript保姆级教程》《VUE》《Krpano》****

✨ 正文

1、 拉取electron官网上的demo,拉下来之后安装依赖,项目跑起来之后,就不用管demo了,开始配置自己的Vue项目

bash 复制代码
git clone https://github.com/electron/electron-quick-start
npm i
npm run start

2、修改自己项目的vue.config.js,路径必须修改为 ./,不是这个后续打包好的页面可能会出现白屏,加载不出来的情况

javascript 复制代码
module.exports = {   
	publicPath: './',   
} 

3、打包自己的Vue项目,这步应该很熟了,将打包出来的 dist 文件夹复制到之前拉取的electron-quick-start文件夹中,和node_modules同级就行

bash 复制代码
npm run build

然后咱自己的项目就不用管了,剩下的就交给拉下来的electron-quick-start项目吧

4、在electron-quick-start项目中,下载打包需要的依赖 electron-packager

bash 复制代码
npm install electron-packager --save-dev

5、进入electron-quick-start项目,删除项目根目录下的 index.html 文件

6、在electron-quick-start项目中找到入口文件 main.js ,修改打包的文件路径为我们的index.html(替换成我们的文件非常非常的重要,注意行数,一般都在16行多一点)

javascript 复制代码
// main.js 原始内容 
mainWindow.loadFile('index.html') 
// 修改后的内容 
mainWindow.loadFile('./dist/index.html')*

7、在electron-quick-start项目中,进入 package.json ,在 scripts 中添加 packager 指令,如下所示:

javascript 复制代码
"scripts": { 
"start": "electron .", 
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
} 

8、运行命令打包,然后项目中会出现一个 App-win32-x64 的文件夹,这个文件就是打包好的桌面应用,文件夹里有一个 App.exe 文件,App.exe就是这个项目的启动文件

bash 复制代码
npm run packager

9、打包完以后,项目中会出现 App-win32-x64文件夹,进去之后,双击App.exe就可以访问了

BrowserWindow选项所有配置

BrowserWindow构造函数接受一个options对象,用于配置新窗口的属性。以下是所有可用选项的列表:

  1. width (Integer) - 窗口的宽度(以像素为单位)。默认为800
  2. height (Integer) - 窗口的高度(以像素为单位)。默认为600
  3. x (Integer) - 窗口的左上角的 x 坐标。
  4. y (Integer) - 窗口的左上角的 y 坐标。
  5. useContentSize (Boolean) - widthheight是否使用Web内容的大小。默认为false
  6. center (Boolean) - 窗口在屏幕上是否居中。
  7. minWidth (Integer) - 窗口的最小宽度。
  8. minHeight (Integer) - 窗口的最小高度。
  9. maxWidth (Integer) - 窗口的最大宽度。
  10. maxHeight (Integer) - 窗口的最大高度。
  11. resizable (Boolean) - 窗口是否可调整大小。默认为true
  12. movable (Boolean) - 窗口是否可移动。这在Linux上无效。默认为true
  13. minimizable (Boolean) - 窗口是否可最小化。默认为true
  14. maximizable (Boolean) - 窗口是否可最大化。默认为true
  15. closable (Boolean) - 窗口是否可关闭。默认为true
  16. focusable (Boolean) - 窗口是否可聚焦。默认为true
  17. alwaysOnTop (Boolean) - 窗口是否永远在其他窗口的顶部。默认为false
  18. fullscreen (Boolean) - 窗口是否是全屏的。设置为false以创建非全屏窗口,这是默认值。
  19. fullscreenable (Boolean) - 窗口是否可切换到全屏状态。默认为true
  20. simpleFullscreen (Boolean) - 使用预先设置的简单(预置)全屏模式启用全屏。默认为false
  21. skipTaskbar (Boolean) - 是否在任务栏中显示窗口。默认为false
  22. kiosk (Boolean) - 是否创建无边框窗口。默认为false
  23. title (String) - 默认窗口标题。默认为"Electron"
  24. icon (String) -在任务栏上使用的图标。
  25. show (Boolean) - 窗口是否在创建时显示。默认为true
  26. frame (Boolean) - 设置为false以在无框模式下运行窗口。默认为true
  27. parent (BrowserWindow) - 设置父窗口。
  28. modal (Boolean) - 是否创建模态窗口。默认为false
  29. acceptFirstMouse (Boolean) - 是否允许在模态窗口获得焦点前发送鼠标事件。
  30. disableAutoHideCursor (Boolean) - 是否隐藏光标在一段时间不活动后。默认为false
  31. autoHideMenuBar (Boolean) - 自动隐藏菜单栏,除非按下Alt键。默认为false
  32. enableLargerThanScreen (Boolean) - 是否允许更改窗口大小超过屏幕大小。默认为false
  33. backgroundColor (String) - 窗口的背景颜色为16进制值。默认为#FFF(白色)。
  34. hasShadow (Boolean) - 设置为true为窗口添加阴影。默认为true
  35. opacity (Number) - 设置窗口的初始不透明度,介于0.0(完全透明)和1.0(完全不透明)之间。
  36. darkTheme (Boolean) - 强制窗口使用深色主题,只在一些GTK+3桌面环境下有效。默认为false
  37. transparent (Boolean) - 使窗口透明。默认为false
  38. type (String) - 窗口的类型,默认为常规窗口。详见文档。
  39. titleBarStyle (String) - 标题栏的样式,默认是default。详见文档。
  40. trafficLightPosition (Object) - 设置窗口控制UI的位置。
  41. webPreferences (Object) - 设置网页功能。详见文档。
  42. vibrancy (Object) - 将窗口渲染为一个模糊的地区。
  43. zoomToPageWidth (Boolean) - 控制是否在创建窗口时缩放为页面宽度,以防止过小的书写。默认为false

✨ 结语

相关推荐
web守墓人32 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L37 分钟前
CSS知识复习5
前端·css
许白掰38 分钟前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架