feat: migrate project to electron-vite structure and update configurations

_script/electron-dev.mjs

@@ -1,10 +1,8 @@
 import { spawn } from 'node:child_process'
-import { createRequire } from 'node:module'
 import process from 'node:process'
 import { setTimeout as delay } from 'node:timers/promises'
 
 const guiDir = process.cwd()
-const require = createRequire(import.meta.url)
 
 const devServerUrl = 'http://localhost:8080'
 const state = {
@@ -23,12 +21,6 @@ function spawnCommand (entry, args = [], extraEnv = {}) {
   })
 }
 
-function resolveVueCliServiceBin () {
-  return require.resolve('@vue/cli-service/bin/vue-cli-service.js', {
-    paths: [guiDir],
-  })
-}
-
 function resolveElectronBin () {
   return require('electron')
 }
@@ -68,7 +60,6 @@ async function shutdown (code = 0) {
   if (state.closing) {
     return
   }
-
   state.closing = true
   stopChild(state.electron)
   stopChild(state.devServer)
@@ -83,10 +74,10 @@ process.on('SIGTERM', () => {
 })
 
 async function main () {
-  const vueCliServiceBin = resolveVueCliServiceBin()
   const electronBin = resolveElectronBin()
 
-  state.devServer = spawnCommand(process.execPath, [vueCliServiceBin, 'serve', '--port', '8080'])
+  // 使用 electron-vite dev 启动开发服务器
+  state.devServer = spawnCommand('pnpm', ['exec', 'electron-vite', 'dev', '--watch'])
   state.devServer.on('exit', (code, signal) => {
     if (!state.closing) {
       void shutdown(code ?? (signal ? 1 : 0))
@@ -96,7 +87,7 @@ async function main () {
   try {
     await waitForServer(devServerUrl, state.devServer)
     state.electron = spawnCommand(electronBin, ['.'], {
-      WEBPACK_DEV_SERVER_URL: devServerUrl,
+      VITE_DEV_SERVER_URL: devServerUrl,
     })
     state.electron.on('exit', (code, signal) => {
       void shutdown(code ?? (signal ? 1 : 0))

package.json

@@ -7,7 +7,8 @@
   "license": "MPL-2.0",
   "scripts": {
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "gui:dev": "cd packages/gui && pnpm dev"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.16.0",

packages/gui/.env

@@ -1,2 +1,2 @@
-VUE_APP_PUBLISH_URL=http://dev-sidecar.docmirror.cn/update/
-VUE_APP_PUBLISH_PROVIDER=generic
+VITE_PUBLISH_URL=http://dev-sidecar.docmirror.cn/update/
+VITE_PUBLISH_PROVIDER=generic

packages/gui/.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/out
 
 
 # local env files

packages/gui/electron-builder.yml

@@ -0,0 +1,85 @@
+appId: dev-sidecar
+productName: dev-sidecar
+artifactName: DevSidecar-${version}-${arch}.${ext}
+copyright: Copyright © 2020-2026 Greper, WangLiang, CuteOmega
+
+directories:
+  output: dist_electron
+  buildResources: build
+
+files:
+  - from: out/main
+    to: out/main
+    filter: ['**/*']
+  - from: out/renderer
+    to: out/renderer
+    filter: ['**/*']
+  - from: out/preload
+    to: out/preload
+    filter: ['**/*']
+  - from: src/main/bridge
+    to: out/main
+    filter: ['mitmproxy.js']
+  - package.json
+  - extra/**/*
+
+extraResources:
+  - from: extra
+    to: extra
+
+afterPack: ./pkg/after-pack.mjs
+afterAllArtifactBuild: ./pkg/after-all-artifact-build.mjs
+
+nsis:
+  oneClick: false
+  perMachine: true
+  allowElevation: true
+  allowToChangeInstallationDirectory: true
+
+win:
+  icon: build/icons/
+  target:
+    - target: nsis
+      arch:
+        - x64
+        - ia32
+        - arm64
+
+linux:
+  icon: build/mac/
+  target:
+    - target: deb
+      arch:
+        - x64
+        - arm64
+        - armv7l
+    - target: AppImage
+      arch:
+        - x64
+        - arm64
+        - armv7l
+    - target: tar.gz
+      arch:
+        - x64
+        - arm64
+        - armv7l
+    - target: rpm
+      arch:
+        - x64
+        - arm64
+        - armv7l
+    - target: flatpak
+      arch:
+        - x64
+  appId: cn.docmirror.DevSidecar
+  category: System
+
+mac:
+  icon: ./build/mac/icon.icns
+  target:
+    target: dmg
+    arch:
+      - x64
+      - arm64
+      - universal
+  category: public.app-category.developer-tools

packages/gui/electron.vite.config.mjs

@@ -0,0 +1,108 @@
+import { defineConfig } from "electron-vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+import fs from "fs";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+// 读取 package.json 中的 dependencies 作为外部依赖
+const pkg = JSON.parse(fs.readFileSync(resolve(__dirname, "package.json"), "utf8"));
+const dependencies = Object.keys(pkg.dependencies || {});
+
+// 复制 mitmproxy.js 到输出目录的插件
+function copyMitmproxyPlugin() {
+  return {
+    name: "copy-mitmproxy",
+    closeBundle() {
+      const src = resolve(__dirname, "src/main/bridge/mitmproxy.js");
+      const dest = resolve(__dirname, "out/main/mitmproxy.js");
+      if (fs.existsSync(src)) {
+        fs.copyFileSync(src, dest);
+        console.log("mitmproxy.js copied to out/main/");
+      }
+    },
+  };
+}
+
+export default defineConfig({
+  main: {
+    build: {
+      outDir: "out/main",
+      rollupOptions: {
+        external: [
+          "electron",
+          ...dependencies,
+        ],
+      },
+    },
+    plugins: [copyMitmproxyPlugin()],
+    resolve: {
+      alias: {
+        "@": resolve(__dirname, "src/main"),
+      },
+    },
+    define: {
+      "global.GENTLY": true,
+    },
+  },
+  preload: {
+    build: {
+      outDir: "out/preload",
+      lib: {
+        entry: resolve(__dirname, "src/preload/index.js"),
+        formats: ["cjs"],
+        fileName: () => "index.js",
+      },
+      rollupOptions: {
+        external: ["electron", ...dependencies],
+      },
+    },
+    plugins: [],
+  },
+  renderer: {
+    root: resolve(__dirname, "src/renderer"),
+    base: "./",
+    publicDir: resolve(__dirname, "public"),
+    build: {
+      outDir: resolve(__dirname, "out/renderer"),
+      rollupOptions: {
+        input: {
+          index: resolve(__dirname, "src/renderer/index.html"),
+        },
+        output: {
+          manualChunks(id) {
+            if (id.includes("node_modules")) {
+              if (
+                id.includes("vue") ||
+                id.includes("vue-router") ||
+                id.includes("ant-design-vue")
+              ) {
+                return "vendor";
+              }
+            }
+          },
+        },
+      },
+    },
+    plugins: [vue(), vueJsx()],
+    resolve: {
+      alias: {
+        "@": resolve(__dirname, "src/renderer/src"),
+      },
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {},
+      },
+    },
+    define: {
+      "global.GENTLY": true,
+    },
+    server: {
+      port: 8080,
+      open: false,
+    },
+  },
+});