electron-vite打包踩坑记录 1,静态资源存放路径 要在src下的renderer目录下新建public, 其他新建文件夹也都放在第一层的src下和renderer同级 2,引用静态资源的路径 引用路径要引用out文件夹下的路径, out是打包前 和 本地开发的资源路径, 会把public下面的打包过来 3,打包后,mac 下无法识别 shell 命令 报错提示bi...
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/...
默认情况下,vite会对静态资源进行合并打包(但仅限link/script的href)。如果需要编译后的路径可通过vite插件钩子进行改变,如上图。 环境变量 按照vite文档所描述,可通过import.meta.env方式引用。但是,打包后会出现问题。可通过vite-plugin-environment插件在主进程中直接把环境变量编译为常量 vite.main.config.ts main....
// 指向渲染进程目录 base: './', // index.html 中静态资源加载位置;如 src="./index.js" build: { outDir: '../../dist/renderer', assetsDir: '', // 这个要格外小心,使用默认的 assets 会导致在 Electron 打包后基于 file:// 加载文件失败 rollupOptions: { output: { format: 'cjs', //...
my-electron-vite-project/ ├── dist/ # 打包后的文件存放位置├── node_modules/ # 项目依赖├── public/ # 静态资源├── src/ │ ├── assets/ # 静态资源(如图片、字体等)│ ├── components/ # Vue组件│ ├── views/ # 页面视图│ ├── App.vue # 根组件│ ├── main....
当环境变量ELECTRON的值不是true时,将base属性值设置为'',即非 Electron 应用程序中,静态资源的基础路径将是根路径。 6、创建electron文件夹并进入electron文件夹 $mkdirelectron &&cdelectron 6.1 创建 Electron 主进程入口文件 $touchindex.js index.js文件内容: ...
需要注意的是文件存放路径,否则打包后会找不到文件,这里笔者是在renderer文件夹下创建了public文件夹,将渲染进程需要使用的静态资源存放在里面。 image.png --- VUE 路由设置与Element-Plus安装 npm install vue-router npm install element-plus 安装后新建相关文件夹与文件 需要注意的是路由模式要...
比如HTTP服务地址的基质,本地静态资源的路径等 这样做主要有两个目的 一个是方便开发者写多个配置环境变量的文件,区分生产环境、测试环境和开发环境 另一个是主进程和渲染进程共享一套环境变量,全局任何一个地方都随取随用,非常方便 正因为如此,一般的编译工具都不会动用户的process对象 ...
start先打包成静态文件,再启动electron加载本地文件,预打包前的预览 dev先启动本地服务器,再启动electron加载服务页面,开发时使用 {"name":"electron-app","version":"1.0.0","description":"An Electron application with Vue","main":"./out/main/index.js","author":"example.com","homepage":"https:/...
仅需少量配置,即可快速整合vite electron开发环境。 特性 默认支持模块热替换(方便开发) 默认支持打包静态资源(图片,视频等) 支持.node模块打包 渲染进程支持node模块 安装 npm i --save-dev @xyh19/vite-plugin-electron# oryarn add -D @xyh19/vite-plugin-electron ...