English | 简体中文
🥳 Electron + Vue3 + Vite2 整合模板 -- 结构简单，容易上手！
这是一个追求精简的Electron类整合模板，只保持最基本的文件、最基本的依赖、最基本的功能；而不是大而全的、臃肿的设计。这样做的目的是能确保模板足够灵活。
所以说如果你是对 -- 工程模板追求精简的 Coder，或者刚入世的小白想弄明白Electron整合类模板最基础的工作原理，亦或者你是大神只是想偷懒少干点活；那么这个模板最合适你不过了。
尽管如此，我还是希望你对Electron Vite有一定的基础；因为除了项目结构简单外，这份README也显得 “精简” 。
模板的具体实现细节我相信你看两遍源码就能把它吃透了 😋
# clone the project
git clone https://github.com/caoxiemeihao/electron-vue-vite.git
# enter the project directory
cd electron-vue-vite
# install dependency
npm install
# develop
npm run dev 一旦启动或打包脚本执行过，会在根目录产生 dist 文件夹，里面的文件夹同 packages 一模一样；在使用一些路径计算时，尤其是相对路径计算；dist 与 packages 里面保持相同的目录结构能避开好多问题
├
├── dist 构建后，根据 packages 目录生成
├ ├── main
├ ├── preload
├ ├── renderer
├
├── scripts
├ ├── build.mjs 项目开发脚本 npm run build
├ ├── watch.mjs 项目开发脚本 npm run dev
├
├── packages
├ ├── main 主进程源码
├ ├── vite.config.ts
├ ├── preload 预加载脚本源码
├ ├── vite.config.ts
├ ├── renderer 渲染进程源码
├ ├── vite.config.ts
├
对待 Electron-Main、Preload-Script 时 vite 会以 lib 形式打包 commonjs 格式代码； 如果碰 node 环境的包可以直接放到 dependencies 中，vite 会解析为 require('xxxx')； electron-builder 打包时候会将 dependencies 中的包打包到 app.asar 里面
对待 Electron-Renderer 时 vite 会以 ESM 格式解析代码； 像 vue、react 这种前端用的包可以直接被 vite 构建，所以不需要 vue、react 源码； 现实情况 vue、react 放到 dependencies 或 devDependencies 中都可以被正确构建； 但是放到 dependencies 会被 electron-builder 打包到 app.asar 里面导致包体变大； 所以放到 devDependencies 既能被正确构建还可以减小 app.asar 体积，一举两得
🚧 因为安全的原因 Electron 默认不支持在 渲染进程 中使用 NodeJs API，但是有些小沙雕就是想这么干，拦都拦不住；实在想那么干的话，用另一个模板更方便 👉 electron-vite-boilerplate
推荐所有的 NodeJs、Electron API 通过 Preload-script 注入到 渲染进程中，例如：
-
packages/preload/index.ts
import fs from 'fs' import { contextBridge, ipcRenderer } from 'electron' // --------- Expose some API to Renderer-process. --------- contextBridge.exposeInMainWorld('fs', fs) contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)
-
packages/renderer/src/global.d.ts
// Defined on the window interface Window { fs: typeof import('fs') ipcRenderer: import('electron').IpcRenderer }
-
packages/renderer/src/main.ts
// Use Electron, NodeJs API in Renderer-process console.log('fs', window.fs) console.log('ipcRenderer', window.ipcRenderer)
// Use Electron, NodeJs API in Renderer-process console.log('fs', window.fs) console.log('ipcRenderer', window.ipcRenderer)
如果你真的在这个模板中开启了 nodeIntegration: true contextIsolation: false 我不拦着
🚧 但是要提醒你做两件事儿
preload/index.ts中的exposeInMainWorld删掉，已经没有用了
- contextBridge.exposeInMainWorld('fs', fs)
- contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)configs/vite-renderer.config中有个resolveElectron最好了解下
👉 这里有个issues请教一下vite-renderer.config中的resolveElectron函数
