Electron 打包 Vue成.exe文件

更新：关于一个错误

关于“Electron failed to install correctly, please delete node_modules/electron and try installing again”错误，此时整个Vue项目都呈错误状态。可以在项目文件夹内输入以下代码解决

cd node_modules/electron && node install.js

在完成Electron包安装之后进行该操作，这之后再运行

npm run serve

查看网页是否打的开来。

npm run electron:serve

查看是否可以正常建立客户端。

npm run electron:build

看能否正常打包。 如果能正常打包，那项目已经建立完成了

一、创建一个vue项目

·配置环境

去Node.js (nodejs.org)官网上下载稳定版的node.js文件(左边那个)

下载node.js文件并安装会附带一个npm

创建项目文件夹，用vscode打开文件夹，在终端内输入以下代码来安装依赖

npm install -g @vue/cli
#或
yarn global add @vue/cli

接着再输入

vue -v

查看vue版本。

·创建项目

在终端内输入以下代码来创建项目

vue create demo

demo是项目名称。

接着，用vscode打开项目文件夹，并在终端内输入以下代码来检验是否创建成功

npm run serve

如果创建成功，那么在终端内会出现两个网址，复制第一个网址去浏览区打开。

二、Vue添加Electron包

·安装Electron包

在刚刚的终端内继续输入以下代码

npm install electron -g

安装Electron。

vue add electron-builder

Vue项目添加Electron-builder打包工具，在下载这个打包工具的时候会顺便下载一个Electron。

·检测是否创建成功

在终端内输入以下代码来检测是否创建成功

npm run electron:serve

如果出现一个窗口，并且窗口内的内容和之前Vue网页上的内容一致，那么说明创建成功。

三、打包

在终端内输入以下代码来进行打包

npm run electron:build

如果打包成功的话，那么打包完成之后去项目文件夹下，会发现有一个“dist_electron”的文件夹。进去之后，会发现一个.exe文件，这个文件就是安装包。同时在这个文件夹下还有一个“win-unpacked”的文件夹，这个就是免安装包，进去之后有一个.exe文件就是客户端了。