knowledge-vue2项目(Electron)打包为PC桌面应用程序

1.使用nvm管理node版本

不同的项目开发需要的node版本环境不一样,所以需要使用nvm进行版本管理。

关键命令:

(1)检查nvm版本号是否安装成功

nvm -v

(2)检查所有node版本号

nvm ls

(3)安装指定node版本16

nvm install 16.18.1

(4)使用对应的node版本

nvm use 16.18.1

(5)检查当前node版本是否正确

node -v

相关参考博客:nvm安装(降低node版本或提高node版本)-CSDN博客 

 2.关闭火绒等安全避免下载失败
 3.创建vue2前端项目并下载Electron
 3.1创建vue2前端项目

  在对应的文件目录下进行前端项目的创建,根据自己需求进行选择相关配置创建项目。

vue create 项目名

vue3-01-初识vue3相对于vue2的提升与比较,使用vue-cli创建项目,使用vite构建工具创建项目-CSDN博客

3.2 引入使用Electron打包项目

Electron是由GitHub开发的开源框架,用于构建跨平台桌面应用程序。允许开发人员使用常见的Web技术,来创建桌面应用程序,同时利用Node.js来访问底层操作系统功能。

(1)安装依赖,在vue项目中进行Electron依赖安装

  根据提示选择最新的Electron版本。

vue add electron-builder

(2)启动Electron开发环境

npm run electron:serve

(3)打包桌面应用应用

生成可执行文件(.exe或.dmg),打包完成后,生成的文件位于dist_electron文件夹中

npm run electron:build

knowledge-vue2项目(Electron)打包为PC桌面应用程序_第1张图片

knowledge-vue2项目(Electron)打包为PC桌面应用程序_第2张图片

 4.Electron安装失败解决

直接修改Electron和Electron Builder二进制文件的镜像源

(1)打开npm配置配置镜像源

npm config edit

(2)文件空白处配置二进制文件的镜像源

electron_mirror=https://cdn.npmmirror.com/binaries/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

knowledge-vue2项目(Electron)打包为PC桌面应用程序_第3张图片

(3)保存重新引入并使用Electron打包项目

 参考博客:最新解决 electron 安装失败问题_electron安装失败-CSDN博客

你可能感兴趣的:(learn,or,imporve,electron,javascript,前端)