npm install-D electron-devtools-installer npm install-D vite-plugin-electron 4.在vite.config.ts中配置vite-plugin-electron插件入口 import { defineConfig } from 'vite'import vue from'@vitejs/plugin-vue'import electron f
1.electron与vite同时启动时第一次会抛错找不到页面,解决方式:先运行vite之后再执行electron 2.dev环境下electron无法监听到vite项目文件热重载,解决方式:1.热重载构建vite项目,2.使用electron-reload监听文件变化 3.子进程无法调用主进程api,解决方式:1.electron/remote(没研究出来),2.ipcMain和ipcRenderer 4.electr...
npm create vite@latest my-vue-app -- --template vue-ts 安装依赖: npm install 运行项目: npm run dev 这样一个最简单的Vue3 + TS + Vite的前端项目就初始化好了。 2.安装Electron相关包 初始化一个基本项目后,我们需要在项目中安装一些关于electron的包。 安装electron: npm install electron -D 如果...
运行pnpm elec:dev单独运行electron程序, 运行pnpm vite:dev单独运行vite项目 运行pnpm vite:build:hot热重载构建vite项目 运行vite:build构建vite项目 运行pnpm builder构建electron项目 问题避坑: 搭建上述软件时遇到以下问题: electron与vite同时启动时第一次会抛错找不到页面,解决方式:先运行vite之后再执行electron de...
这样一个最简单的Vue3 + TS + Vite的前端项目就初始化好了。 2.安装Electron相关包 初始化一个基本项目后,我们需要在项目中安装一些关于electron的包。 安装electron: npm install electron -D 如果你安装electron不成功,建议使用cnpm安装。 安装electron-builder: ...
所以开发一个Vite+Vue3+Electron的脚手架的需求日趋强烈 我前段时间做了一个, 但是发现了一些与Vite有关的问题, 比如:Vite会把开发环境的process对象吃掉的问题 这对于web项目来说问题不大,但对于我们的Electron项目来说,就影响很大了 今天我就把这个思路和实现方式的关键代码发出来供大家参考, ...
使用vue3和vite创建vue的项目然后引入electron 先创建vue项目 npm create vite@latest electron-desktop-tool 进入到项目 执行安装和运行命令,可以看到vue项目已经启动起来了 cd electron-desktop-tool npm install npm run dev 项目可以在浏览器中跑起来,说明没毛病,下一步就在项目中引入 electron ...
其他文件:也就是 vue 初始化后的目录 目录结构这么设计的原因是因为我们使用的 vite-plugin-electron 插件需要使用这样的目录结构,目前还没有提供设置修改。 初始化项目目录 下面就开始初始项目 代码语言:javascript 代码运行次数:0 运行 AI代码解释 yarn create vite electron-desktop --template vue-ts 先使用 vite...
main.ts App.vue background.ts //手动创建文件用于编写electron package.json tsconfig.json vite.config.ts background.ts import { app, BrowserWindow } from 'electron' // 等待Electron应用就绪后创建BrowserWindow窗口 app.whenReady().then(async () => { ...
electron+vite插件:vite-plugin-electron^0.28.7 vite5-electronOS内置了macos+windows两种桌面风格模板。基于Electron32封装高性能多窗口管理,采用自研栅格化拖拽布局引擎。 项目结构框架 electron-vue3os基于vite5.x整合最新跨平台技术electron32.x搭建项目模板。