全网最全搭建Electron项目的各种方式及错误解决

一、官方文档手动搭建

文档地址：快速入门 | Electron，按照文档步骤操作即可，项目只包含了Electron依赖，仅仅只是一个hello world展示。

二、github上拉取官网的electron-quick-start项目

electron-quick-start跟方式一创建的一样，只不过是直接拉取下来，不用自己手动搭建。

三、官方脚手架方式创建

npm init electron-app@latest my-app -- --template=vite  #my-app:项目名
#或
npm create electron-app@latest my-app -- --template=vite #my-app:项目名
#或
pnpm create electron-app my-app --template=vite  #my-app:项目名

--template参数可指定模板，目前支持4种模板：

• webpack

• webpack-typescript

• vite

• vite-typescript

如果创建不成功，可能是由于网络原因，只有多试几次，或者挂梯子。。。

我这里选择默认模板，项目结构如下：

拉取项目后，安装依赖时，electron包可能会由于网络原因安装失败，解决方法见下面的错误二！ 

执行npm run make打包，可能会报错：

错误一：

报错提示没有权限创建out文件夹，用管理员方式打开命令提示窗或PowerShell打包即可；

错误二：

拉取electron依赖超时：

electron的安装并不依赖本地npm中registry所配置的镜像，解决方法：在项目根目录创建.npmrc文件，内容如下：

ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

再次打包就不会报错了。

打包后运行my-app.exe,可能会报如下错误：

执行如下命令后，再重新打包就不会报错了：

pnpm electron-forge import
#或
npm electron-forge import

成功运行：

此方式搭建的项目任然是比较简单的基础框架，除了webpack、typescript或者vite外，要想使用其他额外框架，需要自己手动集成进去。 相对于方式一、二来说，此方式中，打包这块的东西是已经帮我们集成好了的。

四、使用create-electron-vite脚手架搭建

官方文档：Electron⚡️Vite 

注：此模板并非由vite官方提供，而是一位就职于哈啰的大神(草鞋没号)提供的。

创建命令如下：

pnpm create electron-vite my-app #my-app 项目名称
#或
yarn create electron-vite my-app #my-app 项目名称
#或
npm create electron-vite@latest my-app #my-app 项目名称
#或
npm init electron-vite@latest my-app #my-app 项目名称

使用其他包管理器的同学请查看官方文档，或自行百度之 。

执行命令创建项目并安装依赖： 

项目结构：

运行效果图：

这种方式创建项目，有三种技术栈可选：vue，react，vanilla；默认还集成了vite+typescript。 

五、使用vite脚手架创建

执行如下命令：

npm create vite@latest

注：使用其他包管理器的同学，可以查看 Vite官方文档 。

输入项目名称后，到框架选择这步，选择Others：

接着下一步选择create-electron-vite：

会提示安装 create-electron-vite，选择y，然后同样有三种技术栈可选择：vue，react，vanilla；选择一个自己擅长的，回车即可完成项目创建。

值得一提的是，这种方式创建的项目，其实跟方式四创建的项目是完全一样的，只不过是通过vite创建的，在electron-vite的文档上也介绍了这种创建方式：Getting Started

六、使用electron-vite工具创建

npm仓库地址：@quick-start/create-electron - npm

文档地址：electron-vite 下一代 Electron 开发构建工具

前提条件：需要 Node.js 版本 18+，20+ 和 Vite 版本 4.0+

创建命令：

$ npm create @quick-start/electron
#或
$ yarn create @quick-start/electron
#或
$ pnpm create @quick-start/electron

也可以在创建命令中指定模板：

# npm 6.x
npm create @quick-start/electron my-app --template vue

# npm 7+, extra double-dash is needed:
npm create @quick-start/electron my-app -- --template vue

# yarn
yarn create @quick-start/electron my-app --template vue

# pnpm
pnpm create @quick-start/electron my-app --template vue

 执行命令后，按照提示一步步进行：

创建成功后，项目结构如下： 

安装依赖后启动项目，界面如下：

  

这种方式创建的项目，各方面比较完善 ，包括依赖安装失败问题，打包失败问题，以及后期项目的更新迭代(electron-updater)等，均已解决，故可作为生产环境正式项目的搭建方式。

七、github上克隆awesome-vite中的模板

awesome-vite模板地址

目前的模板列表：

• electron-vite-vue - Electron + Vite + Vue template.
• electron-vite-react - Electron + Vite + React template.
• electron-vite-boilerplate - Support SerialPort, SQLite3 and node C/C++ addons.
• electron-vite-quick-start - Full stack uses Vite to run Electron application, including main process.
• electron-vite-template - Electron 13, Vue 3 and TypeScript. Make your desktop development easier.
• fast-vite-electron - Vue3 + Vite + Electron with esbuild.
• fast-vite-nestjs-electron - Vue3 + Vite + Electron + Nestjs with esbuild.
• vite-plugin-electron-quick-start - Template for Electron projects.
• vite-electron-builder - Electron apps using Vite for both back and front-end, with automatic releases.
• vite-reactts-electron-starter - React, Tailwind CSS, TypeScript and Electron.
• Vitectron - TypeScript & JSX + Vue 3.x + Vite 2.x + Pinia 2.x + Vue-Router 4.x.
• vite-plugin-electron-renderer - Support use Node.js API in Electron-Renderer.
• electron-vue-template - Electron template with TypeScript, including Electron Builder.
• Vitron - Build beautiful (win, linux, mac) desktop apps for modern web projects with vite and electron.
• Vutron - Electron + Vite + Vue 3 + Pinia (TypeScript) template.
• vite-electron-plugin - High-performance, esbuild-based Vite Electron plugin.
• vite-plugin-doubleshot - For building Node.js backend or Electron main process.

我这里选择第一个拉取，项目结构如下：

运行结果：

如果打包报错，

参考这篇文章：electron（二）：vue成型项目中使用electron打包的时候会报错下载部分文件失败_nsis-3.0.4.1/nsis-3.0.4.1.7z-CSDN博客写的挺全的，我就不赘述了。

这个模板貌似跟方式四搭建的模板差不多的，代码结构很相似，而且也有草鞋没号的参与。

八、使用Vutron模板创建

Vutron文档地址：Vutron

注：这个模板在方式七中提到的awesome-vite模板列表中也是有的。

执行安装命令：

npm init vutron
#或
pnpm create vutron

这个过程会自动帮我们安装依赖，但由于网络原因，可能会安装失败，只有多试几次，或者挂梯子自己手动安装。反正我是试了好几次才成功的

也可以直接克隆github上的vutron仓库，依然可能会有依赖安装的问题，只有多试几次。。。

git clone https://github.com/jooy2/vutron <PROJECT_NAME>

运行效果：

依赖截图：

测试了下打包，会报错：

依旧是网络原因，在github上拉取electron二进制文件失败了，在项目根目录创建.npmrc文件，设置electron源为国内源即可解决：

electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
shamefully-hoist=true

这个模板比较完善，集成了vite + vue + vur-router + pinia + i18n + typescript + playwright(测试框架)，还集成了代码风格插件eslint和prettier；使用的UI框架是vuetify，若不喜欢可以自己替换。更多模板详情可以查看文档，这里不再赘述。

生产环境框架快速搭建可以考虑这个模板。

九、使用electron-vue-template模板创建

文档地址：基于vue来构建一个electron应用程序

注：这个模板在方式七中提到的awesome-vite模板列表中也是有的。

直接从github上拉取项目，有好几个分支，选择默认分支就行

git clone https://github.com/umbrella22/electron-vite-template.git myapp #myapp 自定义项目名称

如果安装依赖报错，多半是electron依赖安装失败问题，在根目录创建.npmrc文件，内容见方式八。

依赖截图：

启动项目，有点高大上的感觉：

居然有启动加载动画：

运行后界面效果：

 执行打包命令，报错：

解决方式依旧是创建.npmrc文件，内容见方式八。

打包后运行可能会报如下错误：

 原因是依赖安装不完善所致，删除项目下的packag-lock文件或者pnpm-lock文件，再执行命令快速删除node_modules目录，注：在PowerShell下执行会报错

rd /s /q node_modules

然后重新安装依赖便可解决此问题。

此模板也相对较完善，依旧使用了vite构建，除此之外还集成了

• vue-router
• pinia
• electron
• electron-updater
• typescript
• element-plus
• vue
• axios

此模板可用于electron + vue技术栈项目的快速搭建 。

总结

如果你只是想体验下electron，或者测试一些官方文档中示例代码，则可以选择方式一、二创建项目。

如果想要打包功能开箱即用，并且不包含过多的其他依赖，那么选择方式四、方式五搭建是最好的。

如果想要完善点的模板，推荐方式六、八、九搭建项目，它们集成了更多的框架，如：react、vue、vite、webpack、pinia、vue-router等。

方式三(官方脚手架)不太推荐，由于大陆网络原因，经常会遇到依赖安装失败，和打包失败的问题，当然，如果你有梯子那就无所谓了。

注：转载请注明出处，前期测模板以及后期的整理撰写，还是花了不少时间！