用Electron打包vue项目变成.exe桌面程序

Electron现在挺火的，官网的标语是使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。只是没有具体的使用开发项目，所以只是试试创建一个vue项目和用老项目试试能不能打包出来。

新建项目和直接用老项目都试了，查到的有好几种方法，这边就使用一种，觉得比较简单。

创建新的vue项目，这一步就不多说了：

vue create electron-demo

安装electron，没有全局：

npm install electron

很容易报错：

添加模块，这个命令是添加模块，可以去vuecli查一下：

vue add electron-builder

会让你选择，选最高的吧：

这边也是经常报错：

上面的两个步骤总是会报错，用cnpm提示正确了但是也没下载好，重新去执行，然后直接：

npm run electron:serve

如果报错就再重新下载，我是没有一次就安装成功的，不知道是否跟网络有关，执行npm run electron:serve之后要等一等，成功了：

接着就是打包：

npm run electron:build

这边特别的慢，还要下载几个GitHub的压缩文件比如electron-v11.3.0-win32-x64.zip，经常失败，不知道安装的时候-g是不是会好一点。

打包成功：

项目里面多了dist_electron文件，里面的.exe就是客户端了，直接双击就能启动。这边会把生成对应的.exe在C:\Users\dell\AppData\Local里面。

如果是老项目一样的命令，先安装electron，再添加打包模块。要开发的话运行npm run electron:serve，然后修改代码，审查元素，也是支持热更新的：

如果用桌面程序，还是有一些要调整的，比如我这项目用的视口宽高就不适应了。

大概就是这样了，Electron有哪些api都没去试就是成功打包出了.exe，具体的API还是得要开发应用的时候才会去好好了解。