Electron+ vue3+ viteIntegration



Short book address

How and Why

  • There are two main purposes for writing this Demo project
  1. vue@3.x Released, want to try new features
  2. With work umielectronprojects big, start-up speed is not ideal; with the vitetry count a reserve program ^ _ ^


  • npm run dev
  • npm run build

Note 踩坑记

  • This form of import {write} from’fs’ will be compiled by vite into /@modules/fs?import
  • const {write} = require(‘fs’) This form can be used 😉
  • const {ipcRenderer} = require(‘electron’) the same
  • Although require can be used to avoid Vite compilation problems during development, but there is a problem with rollup during packaging;
  • Take const Store = require(‘electron-store’) as an example, in vite.config.ts you can convert it to EMS form by custom rollup plug-in
  // vite.config.ts -> rollupInputOptions -> plugins
  plugins: [
      name: '@rollup/plugin-cjs2esm',
      transform(code, filename) {
        if (filename.includes('/node_modules/')) {
          return code

        const cjsRegexp = /(const|let|var)[\n\s]+(\w+)[\n\s]*=[\n\s]*require\(["|'](.+)["|']\)/g
        const res = code.match(cjsRegexp)
        if (res) {
          // const Store = require('electron-store') -> import Store from 'electron-store'
          code = code.replace(cjsRegexp, `import $2 from '$3'`)
        return code

to sum up

  • 2019 13-inch mac-pro boot speed is about 4 seconds
  • Pentium G4560 computer CPU Shenzhou notebook startup speed is about 6 seconds
  • There is no doubt that vite’s solution has a lot more advantages than @vue/cli, umi, create-react-app and other webpack-based scaffolding startups.
  • Technology is always iterating and progressing rapidly, with the goal of solving some existing or upcoming problems; continue to treat, learn, and cheer~

Download Details:

Author: caoxiemeihao

Source Code: https://github.com/caoxiemeihao/electron-vue-vite

#vuejs #vue #javascript

Electron+ vue3+ viteIntegration
29.90 GEEK