chore: bump deps

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.5.0 to 5.0.4.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.0.4/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.npmrc

@@ -0,0 +1,6 @@
+# For electron-builder
+# https://github.com/electron-userland/electron-builder/issues/6289#issuecomment-1042620422
+shamefully-hoist=true
+
+# For China 🇨🇳 developers
+# electron_mirror=https://npmmirror.com/mirrors/electron/

README.md

@@ -19,16 +19,22 @@
 🔩 Support C/C++ native addons  
 🖥 It's easy to implement multiple windows  
 
-## Quick Start
+## Quick Setup
 
 ```sh
-npm create electron-vite
+# clone the project
+git clone https://github.com/electron-vite/electron-vite-vue.git
+
+# enter the project directory
+cd electron-vite-vue
+
+# install dependency
+npm install
+
+# develop
+npm run dev
 ```
 
-<!-- [![quick-start](https://asciinema.org/a/483731.svg)](https://asciinema.org/a/483731) -->
-
-![electron-vite-vue.gif](/electron-vite-vue.gif)
-
 ## Debug
 
 ![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/electron-vite-react-debug.gif?raw=true)

electron-builder.json5

@@ -5,18 +5,19 @@
   "$schema": "https://raw.githubusercontent.com/electron-userland/electron-builder/master/packages/app-builder-lib/scheme.json",
   "appId": "YourAppID",
   "asar": true,
+  "productName": "YourAppName",
   "directories": {
     "output": "release/${version}"
   },
   "files": [
-    "dist-electron",
-    "dist"
+    "dist",
+    "dist-electron"
   ],
   "mac": {
-    "artifactName": "${productName}_${version}.${ext}",
     "target": [
       "dmg"
-    ]
+    ],
+    "artifactName": "${productName}-Mac-${version}-Installer.${ext}"
   },
   "win": {
     "target": [
@@ -27,12 +28,18 @@
         ]
       }
     ],
-    "artifactName": "${productName}_${version}.${ext}"
+    "artifactName": "${productName}-Windows-${version}-Setup.${ext}"
   },
   "nsis": {
     "oneClick": false,
     "perMachine": false,
     "allowToChangeInstallationDirectory": true,
     "deleteAppDataOnUninstall": false
+  },
+  "linux": {
+    "target": [
+      "AppImage"
+    ],
+    "artifactName": "${productName}-Linux-${version}.${ext}"
   }
 }

electron/electron-env.d.ts

@@ -6,6 +6,6 @@ declare namespace NodeJS {
     DIST_ELECTRON: string
     DIST: string
     /** /dist/ or /public/ */
-    PUBLIC: string
+    VITE_PUBLIC: string
   }
 }

electron/main/index.ts

@@ -14,7 +14,7 @@ import { join } from 'node:path'
 //
 process.env.DIST_ELECTRON = join(__dirname, '..')
 process.env.DIST = join(process.env.DIST_ELECTRON, '../dist')
-process.env.PUBLIC = process.env.VITE_DEV_SERVER_URL
+process.env.VITE_PUBLIC = process.env.VITE_DEV_SERVER_URL
   ? join(process.env.DIST_ELECTRON, '../public')
   : process.env.DIST
 
@@ -43,7 +43,7 @@ const indexHtml = join(process.env.DIST, 'index.html')
 async function createWindow() {
   win = new BrowserWindow({
     title: 'Main window',
-    icon: join(process.env.PUBLIC, 'favicon.ico'),
+    icon: join(process.env.VITE_PUBLIC, 'favicon.ico'),
     webPreferences: {
       preload,
       // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production

package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron-vue-vite",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "main": "dist-electron/main/index.js",
   "description": "Really simple Electron + Vue + Vite boilerplate.",
   "author": "草鞋没号 <308487730@qq.com>",
@@ -24,14 +24,15 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.1.0",
-    "electron": "^25.0.1",
-    "electron-builder": "^23.6.0",
-    "typescript": "^5.0.2",
-    "vite": "^4.1.4",
-    "vite-plugin-electron": "^0.11.2",
-    "vite-plugin-electron-renderer": "^0.14.1",
-    "vue": "^3.2.47",
-    "vue-tsc": "^1.2.0"
+    "@vitejs/plugin-vue": "^5.0.1",
+    "electron": "^28.1.0",
+    "electron-builder": "^24.9.1",
+    "tree-kill": "^1.2.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-plugin-electron": "^0.15.5",
+    "vite-plugin-electron-renderer": "^0.14.5",
+    "vue": "^3.4.1",
+    "vue-tsc": "^1.8.27"
   }
 }

src/App.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import HelloWorld from './components/HelloWorld.vue'
-
-console.log("[App.vue]", `Hello world from Electron ${process.versions.electron}!`)
 </script>
 
 <template>

vite.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 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/
@@ -18,13 +19,13 @@ export default defineConfig(({ command }) => {
       vue(),
       electron([
         {
-          // Main-Process entry file of the Electron App.
+          // Main process entry file of the Electron App.
           entry: 'electron/main/index.ts',
-          onstart(options) {
+          onstart({ startup }) {
             if (process.env.VSCODE_DEBUG) {
               console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App')
             } else {
-              options.startup()
+              startup()
             }
           },
           vite: {
@@ -33,17 +34,26 @@ export default defineConfig(({ command }) => {
               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 : {}),
               },
             },
+            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(),
+            ],
           },
         },
         {
           entry: 'electron/preload/index.ts',
-          onstart(options) {
-            // Notify the Renderer-Process to reload the page when the Preload-Scripts build is complete, 
+          onstart({ reload }) {
+            // Notify the Renderer process to reload the page when the Preload scripts build is complete, 
             // instead of restarting the entire Electron App.
-            options.reload()
+            reload()
           },
           vite: {
             build: {
@@ -54,10 +64,13 @@ export default defineConfig(({ command }) => {
                 external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
               },
             },
+            plugins: [
+              isServe && notBundle(),
+            ],
           },
         }
       ]),
-      // Use Node.js API in the Renderer-process
+      // Use Node.js API in the Renderer process
       renderer(),
     ],
     server: process.env.VSCODE_DEBUG && (() => {