文章插图
1.vue create demo
2.vue ui
3.搜索
vue-cli-plugin-electron-builder,勾选，安装
4.npm run electron:serve
5.npm run electron:build
6.build complete!构建完成！
构建完成后，看一下目录
文件夹dist_electron就是构建文件所在的文件夹，我们找到文件夹打开看一下
demo setup 0.1.0.exe就是安装程序
win-unpacked 从字面意思就可以知道是win环境下没有被打包的（绿色免安装包）
双击demo打开
文章插图
【electron 打包vue为桌面应用的详细过程】
helloworld出来了，没有问题
双击安装
没有问我们安装位置，也没有问是不是要创建快捷方式，很简单粗暴的就安装了，而且安装完后直接打开
hello world出来了没有问题
此时，回到桌面，会发现多了一个快捷方式
就是我们刚才安装的
通过快捷方式，我们可以找到安装位置
C:UsersAdministratorAppDataLocalProgramsdemodemo.exe
进去看看
文章插图
推荐阅读
- 如何在Jenkins上自动化部署Vue，手把手教你
- vue项目设置背景图片?vue打包后背景图片不显示
- 全家桶 Vue 技术栈
- 2021年的前端框架选择 Angular vs React vs Vue
- 搭建第一个简易vue工程
- vue项目引入本地图片不显示的终极解决方法
- 一套代码，多端运行——使用Vue3开发兼容多平台的小程序
- Vue中使用v-viewer组件实现图片预览功能，支持Vue3
- apk 一文带你使用Vue完成移动端项目
- Electron 简介