Electron 打包 Vue成.exe文件
2022年4月14日
更新:关于一个错误
关于“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文件就是客户端了。