✨ add electron-builder

Author: xuxiaowei-com-cn

.gitignore

@@ -35,3 +35,5 @@ playwright-report/
 /yarn.lock
 /pnpm-lock.yaml
 /package-lock.json
+
+/release

.npmrc

@@ -1,2 +1,5 @@
 save-exact=true
 engine-strict=true
+registry=http://registry.npmmirror.com
+electron_mirror=https://npmmirror.com/mirrors/electron/
+electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

electron-builder.ts

@@ -0,0 +1,35 @@
+import { Configuration } from 'electron-builder'
+
+export default <Configuration>{
+  // 应用唯一标识
+  appId: `cn.com.xuxiaowei.${process.env.npm_package_name}`,
+  // 版权信息
+  copyright: 'Copyright © 徐晓伟 https://xuxiaowei.com.cn',
+  // 打包产物名称
+  artifactName: '${productName}-${version}-${platform}-${arch}.${ext}',
+  // 使用 asar 打包
+  asar: true,
+  // asar 打包后解压的文件（运行前会自动解压）
+  asarUnpack: [],
+  // 打包 删除 package.json 的 scripts
+  removePackageScripts: true,
+  // 打包 删除 package.json 的 keywords
+  removePackageKeywords: true,
+  // 是否从应用程序版本号推断更新通道。例如，如果版本为 0.12.1-alpha.1，则 channel 将被设置为 alpha。否则为 latest。
+  detectUpdateChannel: true,
+  // 是否在发布时自动生成更新文件。如果设置为 true，则会在发布时自动生成更新文件，否则需要手动生成。
+  generateUpdatesFilesForAllChannels: true,
+  // 打包的文件
+  files: [
+    // Vite 打包后的文件
+    'dist/**/*',
+    // 程序入口文件
+    'main.js',
+    // 预加载文件
+    'preload.js',
+  ],
+  // 生成资源的目录
+  directories: {
+    output: 'release/${version}',
+  },
+}

main.js

@@ -1,8 +1,11 @@
-import { app, BrowserWindow } from 'electron'
+// Modules to control application life and create native browser window
+
+import { app, net, protocol, BrowserWindow } from 'electron'
 import path from 'path'
-import { fileURLToPath } from 'node:url'
+import { fileURLToPath } from 'url'
 import log from 'electron-log'
 import Store from 'electron-store'
+import fs from 'fs/promises'
 
 const store = new Store()
 
@@ -23,8 +26,14 @@ log.scope.labelPadding = 8
 
 log.info('Hello from Electron 👋')
 
-let devTools = store.get('devTools')
-if (!(devTools instanceof Boolean)) {
+// 创建一个新的日志记录器
+const loader = log.create({ logId: 'loader' })
+loader.transports.file.fileName = 'loader.log'
+loader.scope.defaultLabel = 'loader'
+loader.scope.labelPadding = 8
+
+const devTools = store.get('devTools')
+if (typeof devTools !== 'boolean') {
   store.set('devTools', process.env.NODE_ENV === 'development')
 }
 
@@ -38,7 +47,35 @@ if (!(devTools instanceof Boolean)) {
 // Linux 安装 *.snap：~/snap/项目名/x1/.config/项目名/config.json
 log.info('electron-store path', store.path)
 
+// 协议名称，自定义
+const scheme = 'vvt'
+
+// 新增协议注册函数
+const registerProtocol = () => {
+  protocol.handle(scheme, async (request) => {
+    const url = request.url
+    const parsedUrl = url.substring(scheme.length + 3).replace(/^(\.\.(\/|\\|$))+/, '')
+    const requestedPath = path.join(__dirname, parsedUrl)
+    const normalizedPath = path.normalize(requestedPath)
+
+    try {
+      await fs.access(normalizedPath, fs.constants.R_OK)
+      loader.info(
+        `url: ${url}, parsedUrl: ${parsedUrl}, requestedPath: ${requestedPath}, normalizedPath: ${normalizedPath}`,
+      )
+      return net.fetch(`file://${normalizedPath}`)
+    } catch {
+      const fallbackPath = path.join(__dirname, 'dist', 'index.html')
+      loader.warn(
+        `url: ${url}, parsedUrl: ${parsedUrl}, requestedPath: ${requestedPath}, fallbackPath: ${fallbackPath}`,
+      )
+      return net.fetch(`file://${fallbackPath}`)
+    }
+  })
+}
+
 const createWindow = () => {
+  // Create the browser window.
   const mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
@@ -48,23 +85,49 @@ const createWindow = () => {
     },
   })
 
-  mainWindow.loadURL(process.env.VITE_SERVER_URL)
+  if (process.env.VITE_SERVER_URL) {
+    mainWindow.loadURL(process.env.VITE_SERVER_URL).catch((err) => {
+      log.error('mainWindow.loadURL', process.env.VITE_SERVER_URL, err)
+    })
 
-  mainWindow.webContents.openDevTools()
+    // Open the DevTools.
+    mainWindow.webContents.openDevTools()
+  } else {
+    // and load the index.html of the app.
+    mainWindow.loadURL(`${scheme}://dist/index.html`).catch((err) => {
+      log.error('mainWindow.loadURL', err)
+    })
+  }
 }
 
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
 app.whenReady().then(() => {
+  // 只在生产环境注册协议
+  if (!process.env.VITE_SERVER_URL) {
+    registerProtocol()
+  }
+
   createWindow()
 
-  app.on('activate', () => {
+  app.on('activate', function () {
+    // On macOS it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
     if (BrowserWindow.getAllWindows().length === 0) {
       createWindow()
     }
   })
 })
 
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
 app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') {
     app.quit()
   }
 })
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.

package.json

@@ -16,7 +16,7 @@
     "pre:pnpm": "pnpm install --registry https://registry.npmmirror.com || pnpm install --registry https://registry.npmjs.org",
     "dev": "vite",
     "build-only": "vite build",
-    "build": "run-p type-check \"build-only {@}\" --",
+    "build": "run-p type-check \"build-only {@}\" -- && electron-builder",
     "preview": "vite preview",
     "test:unit": "vitest",
     "test:e2e": "playwright test",
@@ -32,6 +32,7 @@
   },
   "keywords": [
     "electron",
+    "electron-builder",
     "electron-log",
     "electron-store",
     "pinia",
@@ -44,10 +45,7 @@
   ],
   "dependencies": {
     "electron-log": "5.3.3",
-    "electron-store": "10.0.1",
-    "pinia": "3.0.1",
-    "vue": "3.5.13",
-    "vue-router": "4.5.0"
+    "electron-store": "10.0.1"
   },
   "devDependencies": {
     "@playwright/test": "1.51.1",
@@ -62,6 +60,7 @@
     "@vue/test-utils": "2.4.6",
     "@vue/tsconfig": "0.7.0",
     "electron": "35.1.2",
+    "electron-builder": "26.0.12",
     "eslint": "9.23.0",
     "eslint-plugin-oxlint": "0.16.4",
     "eslint-plugin-playwright": "2.2.0",
@@ -70,11 +69,14 @@
     "jsdom": "26.0.0",
     "npm-run-all2": "7.0.2",
     "oxlint": "0.16.4",
+    "pinia": "3.0.1",
     "prettier": "3.5.3",
     "typescript": "5.8.2",
     "vite": "6.2.4",
     "vite-plugin-vue-devtools": "7.7.2",
     "vitest": "3.1.1",
+    "vue": "3.5.13",
+    "vue-router": "4.5.0",
     "vue-tsc": "2.2.8"
   },
   "engines": {

preload.js

@@ -1,3 +1,12 @@
+/**
+ * The preload script runs before `index.html` is loaded
+ * in the renderer. It has access to web APIs as well as
+ * Electron's renderer process modules and some polyfilled
+ * Node.js functions.
+ *
+ * https://www.electronjs.org/docs/latest/tutorial/sandbox
+ */
+
 console.log('preload.js')
 
 window.addEventListener('DOMContentLoaded', () => {

renderer.js

@@ -1 +1,9 @@
+/**
+ * This file is loaded via the <script> tag in the index.html file and will
+ * be executed in the renderer process for that window. No Node.js APIs are
+ * available in this process because `nodeIntegration` is turned off and
+ * `contextIsolation` is turned on. Use the contextBridge API in `preload.js`
+ * to expose Node.js functionality from the main process.
+ */
+
 console.log('renderer.js')

src/router/index.ts

@@ -1,8 +1,8 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',