electron-vue-vite

Electron + Vue3 + Vite2 integration

How and Why

• Vite is the scaffold of the future

Command

• npm run dev
• npm run build

Note

• In the development environment, we need to transform the Electron related API into commonjs
• And you can only use ESM
• So far, I've written an vitejs-plugin-electron plugin

Usage

• vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vitejs-plugin-electron'

export default defineConfig((env) => ({
  plugins: [
    vue(),
    electron(),
  ],
  // other config...
}))

In "src/render/main.ts" file

// You code
import { ipcRenderer } from 'electron'
import Store from 'electron-store'

// Will be generate in development mode
const { ipcRenderer } = require("electron")
const Store = require("electron-store")

• It works!

• 🚀

• 开发模式下 Electron 相关的 API 需要转换成 commonjs

• 并且你只能用 ESM

• 为此我写了一个 vitejs-plugin-electron 插件

electron-vue-vite-webpack

• If you're worried, you can consider using this project
  https://github.com/caoxiemeihao/electron-vue-vite-webpack
  The production environment is packaged with 'webpack'

• 🚀

• 如果你怕踩坑，可以考虑用这个项目
  https://github.com/caoxiemeihao/electron-vue-vite-webpack
  生产环境使用 webpack 打包的

---

---

微信讨论

---

License

MIT License