electron/main/index.ts

@@ -10,7 +10,7 @@ const __dirname = dirname(__filename)
 //
 // ├─┬ dist-electron
 // │ ├─┬ main
-// │ │ └── index.js    > Electron-Main
+// │ │ └── index.mjs    > Electron-Main
 // │ └─┬ preload
 // │   └── index.mjs    > Preload-Scripts
 // ├─┬ dist

package.json

@@ -1,7 +1,7 @@
 {
   "name": "electron-vue-vite",
   "version": "28.0.0",
-  "main": "dist-electron/main/index.js",
+  "main": "dist-electron/main/index.mjs",
   "description": "Really simple Electron + Vue + Vite boilerplate.",
   "author": "草鞋没号 <308487730@qq.com>",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "tree-kill": "^1.2.2",
     "typescript": "^5.3.3",
     "vite": "^5.0.10",
-    "vite-plugin-electron": "^0.28.0-beta.2",
+    "vite-plugin-electron": "^0.28.0-beta.1",
     "vite-plugin-electron-renderer": "^0.14.5",
     "vue": "^3.4.1",
     "vue-tsc": "^1.8.27"

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,13 @@
-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 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 +16,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) {
@@ -41,10 +42,13 @@ export default defineConfig(({ command }) => {
             },
           },
         },
-        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
@@ -55,10 +59,10 @@ export default defineConfig(({ command }) => {
               },
             },
           },
-        },
+        }
+      ]),
       // Use Node.js API in the Renderer process
-        renderer: {},
+      renderer(),
-      }),
     ],
     server: process.env.VSCODE_DEBUG && (() => {
       const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)