Awesome Open Source
Awesome Open Source

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



License

MIT License


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
typescript (11,563
electron (953
vue3 (131
rollup (81
vite (74