使用 Vite 和 Electron 进行开发 - 解决问题与经验分享

最新推荐文章于 2025-10-15 13:08:18 发布
最新推荐文章于 2025-10-15 13:08:18 发布
阅读量308 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： electron javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/AxCybersecurity/article/details/132995815
Electron 专栏收录该内容
69 篇文章 ¥59.90 ¥99.00
订阅专栏
本文详细介绍了如何使用Vite和Electron构建桌面应用，包括项目初始化、设置主进程、使用Node.js模块和Electron API，以及打包应用的步骤。同时，针对在开发过程中可能遇到的问题，如在Electron中使用Node.js模块、在Vite中调用Electron API等，提供了解决方案。

在本文中，我们将探讨如何使用 Vite 和 Electron 进行开发，并分享一些常见问题的解决方案和经验。我们将提供相应的源代码示例，以便更好地理解这些概念。让我们开始吧！

1. 简介

Vite 是一个现代化的前端构建工具，它通过利用 ES 模块原生支持（ES Module）来提供快速的冷启动时间和热模块替换（HMR）能力。Electron 是一个流行的桌面应用程序开发框架，它允许使用 Web 技术（HTML、CSS 和 JavaScript）构建跨平台的桌面应用程序。

结合使用 Vite 和 Electron 可以带来许多好处，例如快速的开发周期、模块化的架构和跨平台的能力。然而，在使用这两个工具时，可能会遇到一些挑战和问题。接下来，我们将讨论一些常见的问题，并提供相应的解决方案。

2. 创建一个基本的 Vite + Electron 应用

首先，我们需要创建一个基本的 Vite + Electron 应用。按照以下步骤进行操作：

步骤 1: 初始化项目

在命令行中，使用以下命令来初始化一个新的 Vite 项目：

npm init vite@latest

根据提示选择 “vanilla” 作为模板，并输入项目名称。然后进入项目目录：


                

                
                
        

    


  


        

                

                  

                  

                  了解本专栏
                  
                  
                    
                  订阅专栏 解锁全文
                   
                

        


    



                



	

		

			

				
					
vite-electron-builder：基于Vite 2.0的Electron应用程序模板

				
			

			

				

					02-20
				

			

		

		

			
				
Vite电子生成器模板
Vite +电子=  :fire:
 这是用于电子应用的安全模板。 遵循最新的安全要求，建议和最佳实践编写。
 在引擎盖下使用了超快速，下一代捆绑用于编译的。
 默认情况下，该接口使用Vue框架，但是您可以轻松使用任何其他框架，例如React ， Preact ， Angular ， Svelte或其他任何框架。
 Vite与框架无关
支持
此模板由维护。 你可以  继续开发此模板。
 如果您有想法，问题或建议-欢迎进行。  :smiling_face_with_smiling_eyes:
特征
电子
 模板使用最新的电子版以及所有最新的安全补丁。
 应用程序的体系结构是根据安全建设和最佳实践。
 的最新版本用于编译应用程序。
恶毒
 用于捆绑所有源代码。 这是一款非常快速的打包机，具有许多强大的功能。 您可以在视频中了解有关其安排的更多信息。
 Vite读取.env文件。 我的模板有一个单独的命令来生成带有环境变量类型定义的.d.ts

			
		

	



                

            
              



	

		

			

				
					
electron-vite-quick-start:全栈使用 Vite 运行 Electron 应用程序，包括主进程

				
			

			

				

					07-24
				

			

		

		

			
				
该项目已被收录到。
Electron-vite-快速启动
 :high_voltage: 全栈使用 Vite来运行 Electron 应用程序，包括主进程。
 :light_bulb: 项目使用管理，因此推荐使用Yarn作为包管理工具。
快速使用
 # Clone this repository
$ git clone https://github.com/yingpengsha/electron-vite-quick-start.git
# Go into the repository
$ cd electron-vite-quick-start
# Install dependencies
$ yarn install
# Run the app
$ yarn run start
建造
 $ yarn run build
去做
执照

			
		

	



              


  
              

                


	

		

			

				
					
开发桌面端应用，使用electron-vite构建项目真的是一绝！

				
			

			

				

					专注前端技术，包括Web端、移动端、小程序、APP
				

				

					02-02
					
					3501
					
				

			

		

		

			
				
技术栈：electron v28.2.1、react v18.2.0构建工具：electron-vite v2.0.0项目打包：electron-builder v24.9.1本教程为项目工程的搭建，相关技术的知识请各自学习。Vite在当下绝对是非常卓越的前端构建工具，很多项目将其与Electron进行结合，开发桌面应用。但是如果单独配置vite进行桌面应用的开发，配置相当繁琐、复杂，甚至需要安装第三方库来解决一些常见问题，例如需安装nodemon来使electron应用热更新；

			
		

	





	

		

			

				
					
dmhsq-vue3-vite-electron Version0.0.1

				
			

			

				

					代码哈士奇的博客
				

				

					03-29
					
					1831
					
				

			

		

		

			
				
桌面端开发

			
		

	



		

			
		



	

		

			

				
					
vue3 + Electron + vite 搭建桌面端应用（完整项目）

					
最新发布

				
			

			

				

					学全栈、大前端方向，就找前端早间课
				

				

					10-15
					
					859
					
				

			

		

		

			
				
本文介绍了一个基于Vue3、Electron和Vite的桌面应用开发项目。项目包含登录页、首页、趣味答题和工具箱等模块，其中工具箱实现了微信多开、文件管理、便签等实用功能。文章详细说明了项目搭建步骤，包括环境配置、路由设置、数据存储等关键技术点，并提供了完整的项目结构和功能截图。该项目适合想要快速入门Electron开发的开发者参考，通过实战案例展示了如何将Vue3与Electron结合，构建跨平台桌面应用程序。

			
		

	





	

		

			

				
					
Vite Electron 快速入门指南

				
			

			

				

					gitblog_00317的博客
				

				

					08-21
					
					588
					
				

			

		

		

			
				
Vite Electron 快速入门指南
本指南将带领您深入了解 MangoTsing/vite-electron-quick 这一开源项目。我们将从项目的目录结构开始，逐步剖析启动文件以及关键的配置文件，帮助您快速上手并使用该框架。
1. 项目目录结构及介绍
vite-electron-quick/
├── public/                       # 静态资源文件夹，Elec...

			
		

	





	

		

			

				
					
使用 Vite 搭建 Electron 项目开发环境

				
			

			

				

					
				

				

					12-19
					
					2154
					
				

			

		

		

			
				
最近准备重写 Electron 相关的实战教程，一年前在掘金上写过相关的文章，现在看来都太过粗糙，大部分东西都是为了记录写下的，并没有系统整理过相关的内容，自己一直在工作中做 Electron 相关的开发，最近又有了一些新的感悟以及相关的实践总结，所以决定从各个方面去写一下相关的实战教程，打算每一篇文章都把自己的思路讲明白，然后附上相应的源码。这一篇文章是讲如何用使用 Vite 搭建 Electron 项目开发环境。

			
		

	





	

		

			

				
					
Vite与Electron实战指南：如何打造下一代跨平台桌面应用

				
			

			

				

					
				

			

		

		

			
				
![Vite与Electron实战指南：如何打造下一代跨平台桌面应用]...Vite以其快速的冷启动和模块热替换(HMR)机制成为前端开发的流行构建工具。同时，Electro

			
		

	





	

		

			

				
					
Vite 与 Electron：构建跨平台桌面应用的新选择

				
			

			

				

					
				

			

		

		

			
				
# 一、介绍Vite和Electron  ## 1.1 什么是Vite？  Vite（法语意为快速）是一个由尤雨溪（Vue.js的创始人）开发的下一代前端构建工具。Vite 的关键特性是快速的冷启动，实时模块热更新（Fast Refresh）和按需编译。它...

			
		

	





	

		

			

				
					
3D实时语音对话交互系统，提示报错：vite 不是内部或外部命令，也不是可运行的程序...如何解决？

				
			

			

				

					**My Coding Family**
				

				

					04-29
					
					1871
					
				

			

		

		

			
				
🏆 本文收录于《全栈Bug调优(实战版)》专栏，致力于分享我在项目实战过程中遇到的各类Bug及其原因，并提供切实有效的解决方案。无论你是初学者还是经验丰富的开发者，本文将为你指引出一条更高效的Bug修复之路，助你早日登顶，迈向财富自由的梦想🚀！同时，欢迎大家关注、收藏、订阅本专栏，更多精彩内容正在持续更新中。让我们一起进步，Up！Up！Up！
  
备注： 部分问题/难题源自互联网，经过精心筛选和整理，结合数位十多年大厂实战经验资深大佬经验总结所得，数条可行方案供所需之人参考。

			
		

	





	

		

			

				
					
TDesign Vue Next Starter中后台项目的生产环境部署与CSP内容安全策略、CORS跨源资源共享和服务后端开发

				
			

			

				

					pulledup的博客
				

				

					02-23
					
					2484
					
				

			

		

		

			
				
TDesign Vue Next Starter 是一个基于腾讯官方TDesign，使用 Vue3、Vite、Pinia、TypeScript 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目。内置多种常用的中后台页面完善的目录结构完善的代码规范配置支持暗黑模式自定义主题颜色多种空间布局内置 Mock 数据方案支持TS。

			
		

	





	

		

			

				
					
插件:vite-plugin-electron

				
			

			

				

					qq_55139096的博客
				

				

					06-04
					
					2622
					
				

			

		

		

			
				
如果你非常了解这个插件的工作原理，或者你想使用vite-plugin-electronic API作为低级API的二次封装，那么平面API更适合你。它也很简单，但更灵活。一般来说，Vite可能无法正确构建Node.js包，尤其是C/C++原生模块，但Vite可以将其作为外部包加载，因此，将Node.js包放在依赖项中。vite-plugin-electron的JavaScript API是完全类型化的，建议在VS Code中使用TypeScript或启用JS类型检查，以利用智能感知和验证。

			
		

	





	

		

			

				
					
electron-vite-tailwind-starter:这个 Starter 结合使用 Electron、Vite 和 Tailwindcss。 它试图坚持最佳实践

				
			

			

				

					07-23
				

			

		

		

			
				
Electron 12 + Vite 2 + Tailwind 2 - 启动器
 这个 Starter 结合使用 、 和 。 它试图遵循在提到的最佳实践
它也使用 。
安装
yarn 
发展
yarn dev 
建造
yarn build

			
		

	





	

		

			

				
					
Electron-vite：极速构建Electron应用

				
			

			

				

					F_a_n_t_a_s_y的博客
				

				

					08-01
					
					1972
					
				

			

		

		

			
				
Electron-vite基于Vite构建，解决了Webpack的配置复杂和启动慢痛点，提供主进程、预加载脚本和渲染进程的一体化处理方案。核心优势包括闪电式HMR、多框架支持、源码保护及完善的调试体验。项目结构分为main、preload和renderer三大模块，通过electron.vite.config.mjs进行简洁配置。打包使用electron-builder.yml文件，支持多平台构建。静态资源需存放在resources目录，通过特殊语法解决打包路径问题。

			
		

	





	

		

			

				
					
【electron-vite】搭建electron+vue3框架基础

				
			

			

				

					我有满天星辰的博客
				

				

					11-30
					
					4668
					
				

			

		

		

			
				
electron项目搭建

			
		

	





	

		

			

				
					
vue3 + vite + electron

				
			

			

				

					kismetIce的博客
				

				

					05-23
					
					540
					
				

			

		

		

			
				
npm create vite@latest my-vue-app -- --template vue  // 搭建vite + vue3。踩了很多坑，(现在也不是最优解，electron包体积过大一直是一个很伤的问题）希望给你带了帮助。所以想要像真正桌面应用那样（双击头部全屏，可拖动缩放应用，退出应用...）需要一些配置。在此多提一嘴：（electron就是一个外壳（浏览器）里面的还是我们写的页面）完成这些就已经可以（运行，打包）项目啦。在src同级文件夹下新建。

			
		

	





	

		

			

				
					
在vite+v3的项目中引入electron

				
			

			

				

					swoly2894265391的博客
				

				

					07-25
					
					804
					
				

			

		

		

			
				
基于vue+vite使用electron创建桌面应用,解决创建不了,运行不了,打包不了......

			
		

	





	

		

			

				
					
electron-vite-vue配置

				
			

			

				

					前端萌新
				

				

					05-21
					
					498
					
				

			

		

		

			
				
。

			
		

	





	

		

			

				
					
使用Vite从零开始构建Electron项目

				
			

			

				

					水寿十八公专栏
				

				

					06-24
					
					3039
					
				

			

		

		

			
				
"script" {项目开发成功后，开发者可以通过npm run start 方式启动应用。在根目录的script/dev/下， 创建文件index.js，它是启动开发环境的脚本，它主要完成如下四项工作：（1）启动Vue项目的开发服务。（2）设置环境变量（3）编译主进程代码（4）启动Electron子进程，并加载Vue项目的首页。

			
		

	





	

		

			

				
					
npm install electron vite-plugin-electron electron-builder -D

				
			

			

				

					07-11
				

			

		

		

			
				
<think>我们正在安装Electron及相关开发依赖。根据用户提供的命令，我们需要执行：
npm install electron vite-plugin-electron electron-builder -D

注意：这里的`-D`等同于`--save-dev`，表示将这些包作为开发依赖安装。

根据引用内容，我们可以得到一些相关信息：
1. 引用[1]中提到安装Electron和electron-builder的命令为：`npm install --verbose electron electron-builder --save-dev`，并且还安装了`vite-plugin-electron`和`vite-plugin-electron-renderer`。
2. 引用[3]中提到了如何使用`vite-plugin-electron`插件，并给出了配置示例。

但是，用户要求安装的包是`electron`、`vite-plugin-electron`和`electron-builder`三个包。注意，引用[1]中同时安装了四个包（包括`vite-plugin-electron-renderer`），但用户并没有要求安装`vite-plugin-electron-renderer`。

因此，我们只需执行用户提供的命令即可。

然而，需要注意的是，引用[1]和引用[3]中使用的`vite-plugin-electron`的安装方式略有不同。引用[1]中安装的是`vite-plugin-electron`和`vite-plugin-electron-renderer`两个包，而引用[3]中只使用了`vite-plugin-electron`，并且从`vite-plugin-electron/simple`导入。根据`vite-plugin-electron`的文档，它已经包含了渲染器的支持，所以可能不需要单独安装`vite-plugin-electron-renderer`。但用户没有要求，我们就不安装。

步骤：
1. 在项目根目录下执行安装命令。
2. 安装完成后，根据引用[3]配置`vite.config.ts`（或`vite.config.js`）文件。

但是，用户目前只需要安装命令，所以我们只需提供安装命令即可。

注意：由于网络原因，安装Electron可能会遇到下载二进制文件慢的问题。可以设置镜像，如引用[1]中提到的`electron-custom-mirror`，但用户没有要求，我们暂时不处理。

因此，直接执行：
```bash
npm install electron vite-plugin-electron electron-builder -D
```

如果安装过程中遇到Electron下载问题，可以考虑设置环境变量：
```bash
# 设置Electron镜像
export ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
```
或者使用`.npmrc`文件配置：
```ini
electron_mirror="https://npmmirror.com/mirrors/electron/"
```

但用户没有提到网络问题，所以先执行安装命令。

安装完成后，我们可以根据引用[3]配置`vite.config.ts`。

示例配置（根据引用[3]）：
```typescript
import electron from 'vite-plugin-electron/simple'

export default {
  plugins: [
    electron({
      main: {
        entry: 'electron/main.ts', // 主进程入口文件
      },
      preload: {
        input: 'electron/preload.ts', // 预加载脚本入口文件
      },
      // 可选：在渲染器进程中使用Node.js API
      renderer: {},
    }),
  ],
}
```

注意：用户项目结构可能不同，请根据实际情况调整入口文件路径。

另外，引用[4]中提到了一个模拟后端请求的插件`vite-plugin-mock-server`，但用户没有要求，所以忽略。

总结：
1. 执行安装命令。
2. 配置`vite.config.ts`。

如果用户需要进一步帮助，可以提供项目结构信息，以便给出更具体的配置。

现在，我们只需告诉用户执行安装命令即可。</think>根据您的要求，我将指导您安装 Electron 及相关开发依赖：

### 安装步骤

1. **执行安装命令**：
```bash
npm install electron vite-plugin-electron electron-builder -D
```
* `-D` 等同于 `--save-dev`，表示作为开发依赖安装[^1]
* 这个命令会同时安装：
  - Electron 核心包
  - vite-plugin-electron（Vite 集成插件）
  - electron-builder（打包工具）

2. **推荐镜像设置**（解决国内下载慢问题）：
```bash
# 设置 Electron 镜像
export ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
```
或在 `.npmrc` 文件中添加：
```ini
electron_mirror="https://npmmirror.com/mirrors/electron/"
```

3. **基础配置**（在 `vite.config.ts` 中）：
```typescript
import electron from 'vite-plugin-electron/simple'

export default {
  plugins: [
    electron({
      main: {
        entry: 'electron/main.ts', // 主进程入口
      },
      preload: {
        input: 'electron/preload.ts', // 预加载脚本
      }
    }),
  ],
}
```

### 注意事项
1. 如果安装卡在 `node install.js` 阶段，请确认镜像设置正确
2. 建议使用 Node.js 16+ 版本以获得最佳兼容性
3. 安装完成后可创建基础目录结构：
```
├── electron
│   ├── main.ts     # 主进程
│   └── preload.ts  # 预加载脚本
└── vite.config.ts
```

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
             | 博主筛选后可见
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值