使用electron将vue项目打包成exe桌面应用

Electron相当于一个浏览器的外壳,可以把现有的vue程序嵌入到壳里面,可以运行在桌面上的一个程序,通俗来说就是软件,比如像QQ、优酷、网易音乐等等。
Electron官网:https://electronjs.org/


一、vue项目中添加 electron 模块

在终端中输入以下命令

vue add electron-builder

选择13.0.0版本回车后等待安装完成

在这里插入图片描述

二、使用 npm run electron:serve 进行启动项目

安装完成后,使用以下命令启动 electron 项目

npm run electron:serve

等待启动完成即可弹出 exe 桌面应用窗口

在这里插入图片描述

三、对 electron 进行配置

启动完成后,项目目录会出现 dist_electron 目录以及 /src/background.js 文件
在这里插入图片描述

background.js 文件即为 electron 的配置文件

在这里插入图片描述

win.setMenu(null) //去掉窗口菜单栏

在这里插入图片描述
其他配置参见 electron 官网

四、打包 exe桌面应用

使用以下命令打包 electron 项目

npm run electron:build

打包完成后出现 win-unpacked 文件夹,win-unpacked 文件夹下的 .exe 文件即为入口文件,双击打开即可,分享时要将 win-unpacked 文件夹 整体打包分享

在这里插入图片描述

  • 8
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

初辰ge

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值