VUE3实战（二）—— Vue3 + Electron生成桌面应用程序

前言

之前我们利用Vue-cli生成了一个Vue3的项目，接下来我们利用Electron生成一个桌面应用

一、Electron是什么？

Electron 是一个能让你使用 JavaScript, HTML 和 CSS 来创建桌面应用程序的框架。 这些应用程序可以打包后在 macOS、Windows 和 Linux 上直接运行，或者通过 Mac App Store 或微软商店进行分发。

二、使用步骤

1.安装Electron

安装Electron，使用这个命令可以直接变更vue目录和package.json的入口文件

vue add electron-builder

之后选择Electron的版本，我选择的是最新的12.0.0

2.启动程序

安装完成后，我们来试试启动

npm run electron:serve

但是这时候我发现启动报错

我从网上查了下，发现是下载的依赖里缺少部分文件。

根据网上一些说法，尝试删除node_modules后重新install依赖，结果还是一样的结果。

在github上，electron的Issues好像有一些解决方案，不过我嫌麻烦，于是在npm上手动下载了缺少的依赖。

在npm上Electron的淘宝镜像中，找到自己对应的版本，下载压缩包

解压缩包，将解压后的文件夹命名为dist，放到项目根目录/node_modules/electron中，并在electron文件夹中新建一个path.txt的文件，内容为electron.exe

再次使用npm run electron:serve启动，时间可能会久一点，之后生成下面的应用程序，表示启动成功。

3.打包

使用build指令打包，可以生成.exe的文件

npm run electron:build

在项目根目录下会生成一个dist_electron的文件夹，里面有生成好的.exe文件。

双击，可以安装文件，默认安装到C盘，并且生成桌面图标。

如果不想安装，win-unpacked文件夹内有绿色免安装版。

4.问题

启动过程中中，等待了很久，并报了以下异常

不过这并未影响启动和打包，但是既然看到了，下次再找找原因，一并解决吧。

总结

启动异常的错误困扰了我好久，才终于找到了个靠谱的方案。

网上各种答案几乎都是删掉依赖重新下载，偶尔有不同的答案也不好用，好在目前看来解决了（git上貌似有解决方案了，一大片英文我就懒得看了）

下次再练习一下Electron的其他功能吧

PS：真心烦复制粘贴党，就这样也算了，有些连格式都不注意随便粘贴，太影响人找答案了

本篇引用文章：用vue-cli+Electron开发一个跨平台的桌面应用____篇一（搭建vue项目、安装electron）