基于electron+vue的桌面应用基础笔记

安装

首先创建一个正常的vue项目，然后 vue add electron-builder

选择13.0

如果出现下面这种就证明已经安装好了，一般需要2分钟

如果时间太长安装失败可以试试cnpm install

安装 完成后 我们使用 npm run electron:serve 运行项目 如果依旧是报错的。请耐心往下看完

此处 我们需要打开项目的目录 找到 node_modules 下的 electron 。 删除 这个文件以后 重新使用 cnpm install

至此。 electron 应用 已经搭建完成。 我们使用 npm run electron:serve 进行启动项目 ( windows 与 imac 一样 )

虽然但是我全程没有报错

项目修改

相比于 基础 vue 项目 我们可以发现在目录中 多出一个 background.js 文件

此处可以 配置 electron 应用的一些设置。 如窗口大小 、 是否可以缩放、是否可以移动窗口等等

注意：打开和 关闭 开发者工具 请点击。 操作栏 > view > Toggle Developer tools

打包 electron 应用

打包应用 使用 npm run electron:build 进行打包 （ imac 系统 和 windows系统 一样使用这个 ）

此处 以 iMac 为例 （ 下面会有 windows 解决方案 ）

当我们看到。 Build complete ! 时 就说明 打包成功 可以查看 dist_electron / mac 里面就是打包好的应用 （ 苹果系统 ）

windows 解决方案

• 打包 windows 应用时 我们需要将 整个项目的源码 上传到 windows 电脑上
• 上传到 windows 电脑上后 同样需要安装 cnpm 不然 electron 是安装不上的
• 打开项目目录 删除掉 node_modules 重新 cnpm install
• 如果还是无法打包 删除掉 node_modules / electron 目录 重新 cnpm install
• 然后运行 npm run electron:build 进行打包

Electron 官网地址 点此 : electron 官方地址