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

注:如果需要浏览器和桌面端同时运行:开发模式用打包工具的代理,编译后走file协议 ,设置electron允许跨域

一、vue项目中添加 electron 模块
在终端中输入以下命令

vue add electron-builder

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

使用electron将vue项目打包成exe桌面应用_第1张图片

二、使用 npm run electron:serve 进行启动项目
安装完成后,使用以下命令启动 electron 项目

npm run electron:serve

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

使用electron将vue项目打包成exe桌面应用_第2张图片

三、对 electron 进行配置
启动完成后,项目目录会出现 dist_electron 目录以及 /src/background.js 文件
使用electron将vue项目打包成exe桌面应用_第3张图片

background.js 文件即为 electron 的配置文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/1c5ffa50ef624290b389dd2535702c67.png使用electron将vue项目打包成exe桌面应用_第4张图片

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

使用electron将vue项目打包成exe桌面应用_第5张图片

其他配置参见 electron 官网

四、打包 exe桌面应用
使用以下命令打包 electron 项目

npm run electron:build

打包完成后出现 win-unpacked 文件夹,win-unpacked 文件夹下的 .exe 文件即为入口文件,双击打开即可,分享时要将 win-unpacked 文件夹 整体打包分享
使用electron将vue项目打包成exe桌面应用_第6张图片

你可能感兴趣的:(vue2,vue3,vue.js,electron,前端)