electron-vite 打包是一个涉及多个步骤的过程,包括安装依赖、配置项目、运行项目以及最终打包。以下是基于你提供的tips的详细步骤: 1. 安装并配置electron-vite相关依赖 首先,你需要初始化一个Vite项目,并安装electron-vite及其相关依赖。假设你已经有一个Vite项目,你可以通过以下命令安装electron-vite: bash npm install...
默认情况下,vite会对静态资源进行合并打包(但仅限link/script的href)。如果需要编译后的路径可通过vite插件钩子进行改变,如上图。 环境变量 按照vite文档所描述,可通过import.meta.env方式引用。但是,打包后会出现问题。可通过vite-plugin-environment插件在主进程中直接把环境变量编译为常量 vite.main.config.ts main....
vite项目配置electron 打包,基于打包完成的dist文件 1、安装electron插件 1 yarn add --dev electronyarn add -D electron-builder 2、修改vite.config.js/vite.config.ts base 指向dist 1 base:'./' 3、增加electron的配置文件 electron\electron.js
electron-vite打包踩坑记录 1,静态资源存放路径 要在src下的renderer目录下新建public, 其他新建文件夹也都放在第一层的src下和renderer同级 2,引用静态资源的路径 引用路径要引用out文件夹下的路径, out是打包前 和 本地开发的资源路径, 会把public下面的打包过来 3,打包后,mac 下无法识别 shell 命令 报错提示bi...
Vite+Electron快速构建一个VUE3桌面应用(三)——打包 二. 思路 先说结论,重点还是在于mainWindow.loadURL()。 打包后还是加载http://localhost:3000是无法运行的,因此,此处需要先用vite打包好,然后使用electron-builder加载vite打包后的文件进行打包。 为了代码能够根据不同环境在运行时加载http://localhost:3000,在...
这篇文章主要记录一下Electron结合前端框架Vue + Vite的应用,整合三者框架并实现一键打包 目录结构 Vue 源码依旧放在src Electron 相关放在electron Vue + Vite 作为前端经常使用的,简单提一下 执行创建 Vue 项目指令 npm create vue@latest 创建一个包含Vue + Vite + TS + Pinia + ESLint + Prettier的项目 ...
Vite 是面向未来几年的构建工具,很有必要在各个场景下都试试集成进来 Electron 作为前端标配的桌面开发工具,官方并有脚手架也没和哪个框架整合 @vue/cli 官方有给出模板;但是 Vite 这块并没提供,毕竟人家定位是和 Webpack 那样的通用构建工具,甚至连 Vue 都没集成 ; 那么我们尝试来做下这件事儿 按照Vue 在 Vi...
最近开发了一个项目,头一回使用electron,很多写代码的习惯都还是原来的。 有个功能是切换菜单,UI是要按钮变色,本来想用icon应付一下,但是又不想去收集icon,就用了他UI的图片。没想到啊!给我炸出一个坑来了 // ts数据是这样的{title:"首页",activeIcon:Icon_0_0,// 这是后来的想法,这个方式需要在vite-en...
一. 简介 上一篇文章Vite+Electron快速构建一个VUE3桌面应用(二)——动态模块热重载完成了开发时的动态模块热重载功能,现在是时候来看看怎么完成最后一步——打包了。 源码:https://github.com/Kuari/Blog/tree/master/Examples/vite_electron/vite_electron_3 系列文章: