electron-vite打包踩坑记录 1,静态资源存放路径 要在src下的renderer目录下新建public, 其他新建文件夹也都放在第一层的src下和renderer同级 2,引用静态资源的路径 引用路径要引用out文件夹下的路径, out是打包前 和 本地开发的资源路径, 会把public下面的打包过来 3,打包后,mac 下无法识别 shell 命令 报错提示bi...
默认情况下,vite会对静态资源进行合并打包(但仅限link/script的href)。如果需要编译后的路径可通过vite插件钩子进行改变,如上图。 环境变量 按照vite文档所描述,可通过import.meta.env方式引用。但是,打包后会出现问题。可通过vite-plugin-environment插件在主进程中直接把环境变量编译为常量 vite.main.config.ts main....
Vite + Vue3 + Electron 打包后静态资源路径错误 图片src 如果是动态拼接的话,路径指向会出现问题 import { ref } from "vue"; const filename = ref("vite.svg"); <template> </template> 第一个路径不正确:file:///G:/vite.svg第二个路径为:file:///G:/vite-electron/release/win-unpacked/...
打包工具:Electron项目通常使用Electron Forge、Electron Builder等工具进行打包。这些工具支持将静态资源复制到打包后的目录中。 路径问题:在打包过程中,需要注意静态资源的路径问题。特别是在使用Vite、Webpack等构建工具时,需要确保构建后的静态资源路径与Electron主进程中的引用路径一致。 资源优化:为了提高应用的性能和用...
"electron:serve": "vite build & electron . ", "electron:build": "electron-builder", "preview": "vite preview" }, 1. 2. 3. 4. 5. 6. 7. 输入命令进行打包: npm run electron:build 1. 打包成功后会出现以下的目录结构: 然后点开win-packed文件里面的exe文件: ...
Vite 是面向未来几年的构建工具,很有必要在各个场景下都试试集成进来 Electron 作为前端标配的桌面开发工具,官方并有脚手架也没和哪个框架整合 @vue/cli 官方有给出模板;但是 Vite 这块并没提供,毕竟人家定位是和 Webpack 那样的通用构建工具,甚至连 Vue 都没集成 ; 那么我们尝试来做下这件事儿 按照Vue 在 Vi...
vite 项目启动时在https://localhost:3000,构建后在 dist 目录下生成静态资源。 在开发环境使用: mainWindow.loadURL("https://localhost:3000"); 生产环境使用: mainWindow.loadFile("/dist/index.html"); 那么如今区分开发环境和生产环境呢? app 主进程的 isPackaged 属性可以帮助我们区分应用是打包前还是打包...
谈Vite在Electron环境下吃花卷拉馒头的现象 缘起 在Electron的渲染进程中(也就是页面代码中), 我们常常使用process.env来携带一些环境变量, 比如HTTP服务地址的基质,本地静态资源的路径等 这样做主要有两个目的 一个是方便开发者写多个配置环境变量的文件,区分生产环境、测试环境和开发环境...
vite-plugin-electron 一个使用electron-builder构建electron应用程序的vite插件 仅需少量配置,即可快速整合vite electron开发环境。 特性 默认支持模块热替换(方便开发) 默认支持打包静态资源(图片,视频等) 支持.node模块打包 渲染进程支持node模块 安装 npm i --save-dev @xyh19/vite-plugin-electron# oryarn add -...
2.vite.config.js参数 首先我们要理解vue的打包编译,vue打包后,我们会看到vue编译的文件目录很简单,其实就是一个纯静态的网页,只有一个html文件:index.html,js和css引入到index.html中,而我们部署的时候,也是用服务器映射到这个index.html上,所以才能完成网页的部署。 vue的开发者模式中,也是在本地构建了一个服务...