1. npm install electron electron -v 检查下版本 是否下载成功 先下载这一步 这样就会自动帮你生成 package.json 然后你再去json里面改代码 不然直接新建package.json然后跑命令 会直接报错 main.js 文件的配置如下 根据你的需要去调整 const {app, BrowserWindow} =require('electron');//引入electron let win;...
Vite+Electron快速构建一个VUE3桌面应用(三)——打包 二. 思路 先说结论,重点还是在于mainWindow.loadURL()。 打包后还是加载http://localhost:3000是无法运行的,因此,此处需要先用vite打包好,然后使用electron-builder加载vite打包后的文件进行打包。 为了代码能够根据不同环境在运行时加载http://localhost:3000,在...
npm install -D vite-plugin-electron 创建项目入口——主进程 electron引入成功了,可以开始写electron的相关代码了,新建一个src-electron文件用来写electron的代码,在它下面创建一个main.ts文件 用来写主进程代码 // src-electron/main.js const { app, BrowserWindow } = require('electron') const { join } =...
是在https://github.com/electron-vite/electron-vite-vue库的参考下完成的,将此库的文件复制到原本存在的项目中完成打包。 步骤如下: 将electron-vite-vue拷贝到本地 将electron-vite-vue项目中的electron文件夹、electron-builder.json5拷贝到已存在项目根目录下 修改已存在项目的package.json在devDependencies下面添...
这篇文章主要记录一下Electron结合前端框架Vue + Vite的应用,整合三者框架并实现一键打包 目录结构 Vue 源码依旧放在src Electron 相关放在electron Vue + Vite 作为前端经常使用的,简单提一下 执行创建 Vue 项目指令 npm create vue@latest 创建一个包含Vue + Vite + TS + Pinia + ESLint + Prettier的项目 ...
先用Vite创建一个Vue3的工程,这就是你的实际项目工程 接着安装几个Electron相关的依赖,最终我的工程下的依赖情况如下: 代码语言:javascript 复制 "@vue/compiler-sfc":"^3.0.0","vite":"^1.0.0-rc.9","vue":"^3.0.2","vue-router":"^4.0.0-rc.1","electron":"^11.0.2","electron-builder":"...
Vite+Electron快速构建一个VUE3桌面应用(三)——打包 二. 思路 先说结论,重点还是在于mainWindow.loadURL()。 打包后还是加载http://localhost:3000是无法运行的,因此,此处需要先用vite打包好,然后使用electron-builder加载vite打包后的文件进行打包。 为了代码能够根据不同环境在运行时加载http://localhost:3000,在...
vite中支持Electron的插件也改为vite-electron-plugin Electron-packager同样可以打包,官方更推荐使用Electron-builder 可使用输入electron命令验证 如果出现安装出错? 检查下Node版本是否与Electron版本匹配,如果不匹配需要降级/升级 检查vue-cli是否匹配,如果不匹配卸载重装 ...
最近开发了一个项目,头一回使用electron,很多写代码的习惯都还是原来的。 有个功能是切换菜单,UI是要按钮变色,本来想用icon应付一下,但是又不想去收集icon,就用了他UI的图片。没想到啊!给我炸出一个坑来了 // ts数据是这样的{title:"首页",activeIcon:Icon_0_0,// 这是后来的想法,这个方式需要在vite-en...