使用electron-builder打包vue成桌面文件

前言

在使用electron-builder打包之前，需要先认识electron是什么，这里我会简单的介绍一下。本文章主要说明electron-builder打包时候会发生的错误原因。

---

一、Electron是什么？

Electron是使用JavaScript，HTML和CSS构建跨平台的桌面应用程序框架。可以构建出一个.应用程序的一个工具。

二、Electron-builder是什么？

安装 electron 后只能运行，不能打包，如果需要把开发完的程序打包为 exe 之类的软件就需要用到 electron-builder 之类的打包模块。简单的说Electron-builder就是一个功能比较齐全的打包模块。

三、准备环境

在使用Electron之前需要安装，nodejs、vue脚手架，这块你们自己安装，这里我展示一下的的版本，能显示出版本说明已经安装上了。

四、electron-builder打包步骤

1. 找一个vue项目，打开package.json,这是没安装electron-builder前的样子
   

2. 在idea的终端或控制台输入vue add electron-builder（如果使用vscode的就在vscode的控制台输入）
   安装成功后进入package.json配置文件中查看，是否多了几个配置
   
   在终端输入npm run electron:serve或直接点配置文件中的按键进行启动。
   
   出现如图所示的样子代表你已经成功了。这里利用ctrl + c停掉服务。

3. 最后一步就是打包，在终端输入npm run electron-builder进行打包。打包过程会下载一些依赖需要点时间
   
   组后看到这样子就证明你成功了，打开项目会多一个dist_electron文件，进入这个文件会看到如图

四、会出现的错误以及解决方法

1. 使用npm安装electron的时候可能会报错误，可能是网络差也可能是，node的问题

2. 安装 electron-builder的时候尽量用vue add electron-builder安装好点

3. npm run electron:serve的时候如果报错了可能是因为node版本过高，那就测试一下如图配置
   

4. npm run electron:serve如果运行不出来框框，那可能是因为node版本的问题

5. npm run electron-builder打包时候会下载很多依赖，有些依赖会因为各种原因下载时候卡住，无法下载，参考点击这 。可以找到C:\Users*用户名\AppData\Local目录下面的这两个文件
   
   
   一定要保证这两个文件下的依赖下载下来了，我当时少了nsis中的两个文件，于是点击报错的链接下载了下来
   
   下载下来后解压到这个目录中去，切记这个目录中不能再有其他东西，只能有这两个文件，否则会报错！！！

总结

到这里就完结了，以上是我安装的过程和踩过的坑，希望对你们有帮助。