Vite Electron Template 是一款基于主流前端技术（如 TypeScript、ElementPlus、Tailwindcss、Vue3 和 Electron）构建的轻量级高性能桌面应用开发框架。该框架集成了文件路由系统、自动化组件库及 MockJs 模拟工具等功能模块。
项目node版本不低于18.0.0
-
安装python 安装路径
lib/python-3.11.9-amd64.exe安装完成后执行python --version会显示版本号 -
安装Visual Studio 下载后选择c++ 桌面开发
-
安装Visual Studio Build Tools 下载后选择c++ 桌面开发
-
安装NodeJS版本
// 版本
v20.18.1- 设置pnpm以及清除npm缓存
npm install -g pnpm
pnpm cache clean --force- 设置electron为国内镜像源
pnpm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/pnpm run dev// 打包目录结构
pnpm run build:dir
// 打包windows安装包
pnpm run build:win
// 打包mac安装包
pnpm run build:mac
// 打包linux安装包
pnpm run build:linux├── scripts/ # 构建和服务应用程序的脚本
│ ├── build.js # 构建脚本
│ ├── deploy.js # 部署脚本
│ ├── dev-server.js # 开发服务器脚本
│ └── private/ # 私有脚本
│ └── tsc.js # TypeScript编译脚本
├── src/
│ ├── main/ # 主线程 (Electron应用程序源码)
│ │ ├── main.js # 主进程入口文件
│ │ ├── preload.js # 预加载脚本
│ │ ├── static/ # 静态资源目录
│ │ └── tsconfig.json # TypeScript配置
│ └── renderer/ # 渲染线程 (VueJS应用程序源码)
│ ├── App.vue # Vue应用主组件
│ ├── Layouts/ # 布局组件
│ │ ├── components/ # 布局相关组件
│ │ └── default.vue # 默认布局
│ ├── assets/ # 资源文件
│ │ └── styles/ # 样式文件
│ ├── components/ # 公共组件
│ │ └── SvgIcon/ # SVG图标组件
│ ├── config/ # 配置文件
│ │ ├── axios.config.ts # Axios配置
│ │ ├── router.config.ts # 路由配置
│ │ └── setting.ts # 应用设置
│ ├── index.html # HTML模板
│ ├── main.ts # 渲染进程入口文件
│ ├── pages/ # 页面组件
│ │ ├── index.vue # 首页
│ │ └── redirect/ # 重定向页面
│ ├── public/ # 公共资源
│ │ ├── css/ # CSS文件
│ │ ├── images/ # 图片资源
│ │ └── svg/ # SVG资源
│ ├── store/ # 状态管理
│ │ ├── index.ts # Store入口
│ │ └── modules/ # Store模块
│ ├── tsconfig.json # TypeScript配置
│ ├── types/ # 类型定义
│ │ ├── auto-imports.d.ts # 自动导入类型
│ │ ├── electron.d.ts # Electron类型
│ │ ├── shims-vue.d.ts # Vue类型
│ │ └── type.ts # 通用类型
│ └── utils/ # 工具函数
│ └── auth.class.ts # 认证工具类
├── icon/ # 应用图标
│ ├── icon.ico # Windows图标
│ └── icon.png # 通用图标
├── electron-builder.json # Electron Builder配置
├── tailwind.config.js # Tailwind CSS配置
├── tsconfig.json # 项目TypeScript配置
└── vite.config.js # Vite配置若需在安装后将文件复制到应用程序目录，请将这些文件添加至 src/main/static 目录中。
该目录下的文件仅对 main 进程可见，类似于 src/renderer/assets 仅对 renderer 进程可见的机制。除此之外，其工作原理与您在其他前端项目中的操作完全一致。
import { app } from 'electron';
import { join } from 'path';
import { readFileSync } from 'fs';
const path = join(app.getAppPath(), 'static', 'myFile.txt');
const buffer = readFileSync(path);⨯ cannot execute cause=fork/exec C:\Users\EDY\AppData\Local\nvm\v20.18.1\node_modules\pnpm\bin\pnpm.cjs: %1 is not a valid Win32 application.
bin\pnpm.cjs文件头部#!/usr/bin/env node替换成#!node
electron always "Electron failed to install correctly, please delete node_modules/electron and try installing again"
package.json文件中添加
"pnpm": {
"onlyBuiltDependencies": ["electron"]
}