chore: bump deps

electron-builder.json5

@@ -1,4 +1,6 @@
-// @see https://www.electron.build/configuration/configuration
+/**
+ * @see https://www.electron.build/configuration/configuration
+ */
 {
   "$schema": "https://raw.githubusercontent.com/electron-userland/electron-builder/master/packages/app-builder-lib/scheme.json",
   "appId": "YourAppID",

electron/electron-env.d.ts

@@ -3,20 +3,8 @@
 declare namespace NodeJS {
   interface ProcessEnv {
     VSCODE_DEBUG?: 'true'
-    /**
+    DIST_ELECTRON: string
-     * The built directory structure
+    DIST: string
-     *
-     * ```tree
-     * ├─┬ dist-electron
-     * │ ├─┬ main
-     * │ │ └── index.js    > Electron-Main
-     * │ └─┬ preload
-     * │   └── index.mjs   > Preload-Scripts
-     * ├─┬ dist
-     * │ └── index.html    > Electron-Renderer
-     * ```
-     */
-    APP_ROOT: string
     /** /dist/ or /public/ */
     VITE_PUBLIC: string
   }

electron/main/index.ts

@@ -1,11 +1,6 @@
 import { app, BrowserWindow, shell, ipcMain } from 'electron'
-import { createRequire } from 'node:module'
+import { release } from 'node:os'
-import { fileURLToPath } from 'node:url'
+import { join } from 'node:path'
-import path from 'node:path'
-import os from 'node:os'
-
-const require = createRequire(import.meta.url)
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 // The built directory structure
 //
@@ -13,22 +8,18 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
 // │ ├─┬ main
 // │ │ └── index.js    > Electron-Main
 // │ └─┬ preload
-// │   └── index.mjs   > Preload-Scripts
+// │   └── index.js    > Preload-Scripts
 // ├─┬ dist
 // │ └── index.html    > Electron-Renderer
 //
-process.env.APP_ROOT = path.join(__dirname, '../..')
+process.env.DIST_ELECTRON = join(__dirname, '..')
-
+process.env.DIST = join(process.env.DIST_ELECTRON, '../dist')
-export const MAIN_DIST = path.join(process.env.APP_ROOT, 'dist-electron')
+process.env.VITE_PUBLIC = process.env.VITE_DEV_SERVER_URL
-export const RENDERER_DIST = path.join(process.env.APP_ROOT, 'dist')
+  ? join(process.env.DIST_ELECTRON, '../public')
-export const VITE_DEV_SERVER_URL = process.env.VITE_DEV_SERVER_URL
+  : process.env.DIST
-
-process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL
-  ? path.join(process.env.APP_ROOT, 'public')
-  : RENDERER_DIST
 
 // Disable GPU Acceleration for Windows 7
-if (os.release().startsWith('6.1')) app.disableHardwareAcceleration()
+if (release().startsWith('6.1')) app.disableHardwareAcceleration()
 
 // Set application name for Windows 10+ notifications
 if (process.platform === 'win32') app.setAppUserModelId(app.getName())
@@ -38,27 +29,33 @@ if (!app.requestSingleInstanceLock()) {
   process.exit(0)
 }
 
+// Remove electron security warnings
+// This warning only shows in development mode
+// Read more on https://www.electronjs.org/docs/latest/tutorial/security
+// process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
+
 let win: BrowserWindow | null = null
-const preload = path.join(__dirname, '../preload/index.mjs')
+// Here, you can also use other preload
-const indexHtml = path.join(RENDERER_DIST, 'index.html')
+const preload = join(__dirname, '../preload/index.js')
+const url = process.env.VITE_DEV_SERVER_URL
+const indexHtml = join(process.env.DIST, 'index.html')
 
 async function createWindow() {
   win = new BrowserWindow({
     title: 'Main window',
-    icon: path.join(process.env.VITE_PUBLIC, 'favicon.ico'),
+    icon: join(process.env.VITE_PUBLIC, 'favicon.ico'),
     webPreferences: {
       preload,
       // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
-      // nodeIntegration: true,
-
       // Consider using contextBridge.exposeInMainWorld
       // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
-      // contextIsolation: false,
+      nodeIntegration: true,
+      contextIsolation: false,
     },
   })
 
-  if (VITE_DEV_SERVER_URL) { // #298
+  if (process.env.VITE_DEV_SERVER_URL) { // electron-vite-vue#298
-    win.loadURL(VITE_DEV_SERVER_URL)
+    win.loadURL(url)
     // Open devTool if the app is not packaged
     win.webContents.openDevTools()
   } else {
@@ -112,8 +109,8 @@ ipcMain.handle('open-win', (_, arg) => {
     },
   })
 
-  if (VITE_DEV_SERVER_URL) {
+  if (process.env.VITE_DEV_SERVER_URL) {
-    childWindow.loadURL(`${VITE_DEV_SERVER_URL}#${arg}`)
+    childWindow.loadURL(`${url}#${arg}`)
   } else {
     childWindow.loadFile(indexHtml, { hash: arg })
   }

electron/preload/index.ts

@@ -1,29 +1,3 @@
-import { ipcRenderer, contextBridge } from 'electron'
-
-// --------- Expose some API to the Renderer process ---------
-contextBridge.exposeInMainWorld('ipcRenderer', {
-  on(...args: Parameters<typeof ipcRenderer.on>) {
-    const [channel, listener] = args
-    return ipcRenderer.on(channel, (event, ...args) => listener(event, ...args))
-  },
-  off(...args: Parameters<typeof ipcRenderer.off>) {
-    const [channel, ...omit] = args
-    return ipcRenderer.off(channel, ...omit)
-  },
-  send(...args: Parameters<typeof ipcRenderer.send>) {
-    const [channel, ...omit] = args
-    return ipcRenderer.send(channel, ...omit)
-  },
-  invoke(...args: Parameters<typeof ipcRenderer.invoke>) {
-    const [channel, ...omit] = args
-    return ipcRenderer.invoke(channel, ...omit)
-  },
-
-  // You can expose other APTs you need here.
-  // ...
-})
-
-// --------- Preload scripts loading ---------
 function domReady(condition: DocumentReadyState[] = ['complete', 'interactive']) {
   return new Promise((resolve) => {
     if (condition.includes(document.readyState)) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron-vue-vite",
-  "version": "28.1.0",
+  "version": "2.2.0",
   "main": "dist-electron/main/index.js",
   "description": "Really simple Electron + Vue + Vite boilerplate.",
   "author": "草鞋没号 <308487730@qq.com>",
@@ -18,21 +18,21 @@
       "VITE_DEV_SERVER_URL": "http://127.0.0.1:3344/"
     }
   },
-  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build && electron-builder",
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue": "^5.0.1",
-    "electron": "^30.0.1",
+    "electron": "^28.1.0",
-    "electron-builder": "^24.13.3",
+    "electron-builder": "^24.9.1",
-    "typescript": "^5.4.2",
+    "tree-kill": "^1.2.2",
-    "vite": "^5.1.5",
+    "typescript": "^5.3.3",
-    "vite-plugin-electron": "^0.28.4",
+    "vite": "^5.0.10",
+    "vite-plugin-electron": "^0.15.5",
     "vite-plugin-electron-renderer": "^0.14.5",
-    "vue": "^3.4.21",
+    "vue": "^3.4.1",
-    "vue-tsc": "^2.0.6"
+    "vue-tsc": "^1.8.27"
   }
 }

src/demos/ipc.ts

@@ -1,4 +0,0 @@
-
-window.ipcRenderer.on('main-process-message', (_event, ...args) => {
-  console.log('[Receive Main-process message]:', ...args)
-})

src/main.ts

@@ -1,11 +1,7 @@
 import { createApp } from 'vue'
+import "./style.css"
 import App from './App.vue'
-
+import './samples/node-api'
-import './style.css'
-
-import './demos/ipc'
-// If you want use Node.js, the`nodeIntegration` needs to be enabled in the Main process.
-// import './demos/node'
 
 createApp(App)
   .mount('#app')

src/samples/node-api.ts

@@ -1,5 +1,10 @@
 import { lstat } from 'node:fs/promises'
 import { cwd } from 'node:process'
+import { ipcRenderer } from 'electron'
+
+ipcRenderer.on('main-process-message', (_event, ...args) => {
+  console.log('[Receive Main-process message]:', ...args)
+})
 
 lstat(cwd()).then(stats => {
   console.log('[fs.lstat]', stats)

src/vite-env.d.ts

@@ -5,8 +5,3 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
-
-interface Window {
-  // expose in the `electron/preload/index.ts`
-  ipcRenderer: import('electron').IpcRenderer
-}

vite.config.flat.txt

@@ -1,76 +0,0 @@
-import { rmSync } from 'node:fs'
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import electron from 'vite-plugin-electron'
-import renderer from 'vite-plugin-electron-renderer'
-import pkg from './package.json'
-
-// https://vitejs.dev/config/
-export default defineConfig(({ command }) => {
-  rmSync('dist-electron', { recursive: true, force: true })
-
-  const isServe = command === 'serve'
-  const isBuild = command === 'build'
-  const sourcemap = isServe || !!process.env.VSCODE_DEBUG
-
-  return {
-    plugins: [
-      vue(),
-      electron([
-        {
-          // Main process entry file of the Electron App.
-          entry: 'electron/main/index.ts',
-          onstart({ startup }) {
-            if (process.env.VSCODE_DEBUG) {
-              console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App')
-            } else {
-              startup()
-            }
-          },
-          vite: {
-            build: {
-              sourcemap,
-              minify: isBuild,
-              outDir: 'dist-electron/main',
-              rollupOptions: {
-                // Some third-party Node.js libraries may not be built correctly by Vite, especially `C/C++` addons, 
-                // we can use `external` to exclude them to ensure they work correctly.
-                // Others need to put them in `dependencies` to ensure they are collected into `app.asar` after the app is built.
-                // Of course, this is not absolute, just this way is relatively simple. :)
-                external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
-              },
-            },
-          },
-        },
-        {
-          entry: 'electron/preload/index.ts',
-          onstart({ reload }) {
-            // Notify the Renderer process to reload the page when the Preload scripts build is complete, 
-            // instead of restarting the entire Electron App.
-            reload()
-          },
-          vite: {
-            build: {
-              sourcemap: sourcemap ? 'inline' : undefined, // #332
-              minify: isBuild,
-              outDir: 'dist-electron/preload',
-              rollupOptions: {
-                external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
-              },
-            },
-          },
-        }
-      ]),
-      // Use Node.js API in the Renderer process
-      renderer(),
-    ],
-    server: process.env.VSCODE_DEBUG && (() => {
-      const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)
-      return {
-        host: url.hostname,
-        port: +url.port,
-      }
-    })(),
-    clearScreen: false,
-  }
-})

vite.config.ts

@@ -1,12 +1,14 @@
-import fs from 'node:fs'
+import { rmSync } from 'node:fs'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import electron from 'vite-plugin-electron/simple'
+import electron from 'vite-plugin-electron'
+import renderer from 'vite-plugin-electron-renderer'
+import { notBundle } from 'vite-plugin-electron/plugin'
 import pkg from './package.json'
 
 // https://vitejs.dev/config/
 export default defineConfig(({ command }) => {
-  fs.rmSync('dist-electron', { recursive: true, force: true })
+  rmSync('dist-electron', { recursive: true, force: true })
 
   const isServe = command === 'serve'
   const isBuild = command === 'build'
@@ -15,9 +17,9 @@ export default defineConfig(({ command }) => {
   return {
     plugins: [
       vue(),
-      electron({
+      electron([
-        main: {
+        {
-          // Shortcut of `build.lib.entry`
+          // Main process entry file of the Electron App.
           entry: 'electron/main/index.ts',
           onstart({ startup }) {
             if (process.env.VSCODE_DEBUG) {
@@ -39,12 +41,20 @@ export default defineConfig(({ command }) => {
                 external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
               },
             },
+            plugins: [
+              // This is just an option to improve build performance, it's non-deterministic!
+              // e.g. `import log from 'electron-log'` -> `const log = require('electron-log')` 
+              isServe && notBundle(),
+            ],
           },
         },
-        preload: {
+        {
-          // Shortcut of `build.rollupOptions.input`.
+          entry: 'electron/preload/index.ts',
-          // Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.
+          onstart({ reload }) {
-          input: 'electron/preload/index.ts',
+            // Notify the Renderer process to reload the page when the Preload scripts build is complete, 
+            // instead of restarting the entire Electron App.
+            reload()
+          },
           vite: {
             build: {
               sourcemap: sourcemap ? 'inline' : undefined, // #332
@@ -54,13 +64,14 @@ export default defineConfig(({ command }) => {
                 external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
               },
             },
+            plugins: [
+              isServe && notBundle(),
+            ],
           },
-        },
+        }
-        // Ployfill the Electron and Node.js API for Renderer process.
+      ]),
-        // If you want use Node.js in Renderer process, the `nodeIntegration` needs to be enabled in the Main process.
+      // Use Node.js API in the Renderer process
-        // See 👉 https://github.com/electron-vite/vite-plugin-electron-renderer
+      renderer(),
-        renderer: {},
-      }),
     ],
     server: process.env.VSCODE_DEBUG && (() => {
       const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)