electron-vite-vue
时间: 2025-01-31 15:18:00 浏览: 54
### Electron Vite Vue 项目搭建与配置教程
#### 创建项目结构
为了创建一个基于 Electron、Vite 和 Vue 的项目,首先需要初始化一个新的 Node.js 项目并安装必要的依赖项。这可以通过执行以下命令来完成:
```bash
npm init -y
npm install vite @vitejs/plugin-vue electron vite-plugin-electron vite-plugin-electron-renderer --save-dev
```
#### 修改 `package.json` 文件中的脚本部分
为了让应用程序能够顺利运行,在 `package.json` 中添加启动和构建命令是非常重要的。具体来说,应该加入如下所示的新条目[^1]:
```json
{
"scripts": {
"dev": "vite",
"build": "vite build && electron-builder"
}
}
```
这里定义了两个主要的 npm 脚本:一个是用于开发模式下的热重载服务 (`dev`);另一个则是用来打包整个应用以便分发(`build`)。
#### 编辑 Vite 配置文件
接下来要编辑的是位于根目录下的 `vite.config.ts` 文件。此文件负责设置如何编译前端资源以及集成 Electron 插件。以下是推荐的一个基本配置示例[^2]:
```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
import electronRender from 'vite-plugin-electron-renderer'
export default defineConfig({
plugins: [
vue(),
electron({
main: {
entry: 'electron/index.ts',
},
}),
electronRender()
]
})
```
这段代码引入了一些插件以支持 Vue 组件解析和支持 Electron 主进程和渲染器进程之间的通信。
#### 设置 Electron 构建选项
最后一步是调整项目的打包方式。通过在项目根目录下创建 `.electron-vue` 文件夹,并在其内部放置名为 `builder.config.js` 或者直接在 package.json 添加 builder 字段可以实现这一点。对于大多数情况而言,默认配置已经足够满足需求,但如果想要自定义某些方面(比如图标路径),则可以根据官方文档进一步定制化。
阅读全文
相关推荐


















