feat: 完成 electron dev/preview/build

.env.development

@@ -2,7 +2,7 @@
 VITE_USE_MOCK = true
 
 # public path
-VITE_PUBLIC_PATH = /
+VITE_PUBLIC_PATH = ./
 
 # Cross-domain proxy, you can configure multiple
 # Please note that no line breaks

.env.preview

@@ -2,7 +2,7 @@
 VITE_USE_MOCK = false
 
 # public path
-VITE_PUBLIC_PATH = /
+VITE_PUBLIC_PATH = ./
 
 # Delete console
 VITE_DROP_CONSOLE = true
@@ -17,7 +17,7 @@ VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
 
 # Basic interface address SPA
 # VITE_GLOB_API_URL=/basic-api
-VITE_GLOB_API_URL=http://192.168.0.156:17181
+VITE_GLOB_API_URL=http://192.168.0.156:8081
 
 # Interface prefix
 # VITE_GLOB_API_URL_PREFIX=

.env.production

@@ -2,7 +2,7 @@
 VITE_USE_MOCK = false
 
 # public path
-VITE_PUBLIC_PATH = /
+VITE_PUBLIC_PATH = ./
 
 # Delete console
 VITE_DROP_CONSOLE = true

build/utils.ts

@@ -18,7 +18,7 @@ export function isReportMode(): boolean {
 }
 
 // Read all environment variable configuration files to process.env
-export function wrapperEnv(envConf: Recordable): ViteEnv {
+export function wrapperEnv(envConf: Recordable, includePort = false): ViteEnv {
     const ret: any = {}
 
     for (const envName of Object.keys(envConf)) {
@@ -27,6 +27,9 @@ export function wrapperEnv(envConf: Recordable): ViteEnv {
 
         if (envName === 'VITE_PORT') {
             realName = Number(realName)
+            if (includePort) {
+                process.env[envName] = realName
+            }
         }
         if (envName === 'VITE_PROXY' && realName) {
             try {

build/vite/proxy.ts

@@ -22,7 +22,7 @@ export function createProxy(list: ProxyList = []) {
 
         // https://github.com/http-party/node-http-proxy#options
         ret[prefix] = {
-            target: target,
+            target,
             changeOrigin: true,
             ws: true,
             rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''),

electron-builder.yml

 appId: com.yiring.basic.electron.app
-productName: Basic Electron App
+productName: 'Basic Electron App'
 directories:
   buildResources: build
+  output: release/${version}
 files:
-  - '!**/.vscode/*'
-  - '!src/*'
-  - '!electron/*'
-  - '!tests/*'
-  - '!types/*'
-  - '!mock/*'
-  - '!electron.vite.config.{js,ts,mjs,cjs}'
-  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
-  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
+  - 'out'
+  - 'build/electron'
 asarUnpack:
   - '**/*.{node,dll}'
 afterSign: build/electron/notarize.js
 win:
   executableName: basic-electron-app
 nsis:
-  artifactName: ${name}-${version}-setup.${ext}
+  artifactName: ${productName}_${version}.${ext}
   shortcutName: ${productName}
   uninstallDisplayName: ${productName}
   createDesktopShortcut: always
+  oneClick: false
+  perMachine: false
+  allowToChangeInstallationDirectory: true
+  deleteAppDataOnUninstall: false
 mac:
   entitlementsInherit: build/electron/entitlements.mac.plist
   extendInfo:

electron.vite.config.ts

 import { resolve } from 'node:path'
 import { merge } from 'lodash-es'
 import { defineConfig, defineViteConfig, externalizeDepsPlugin } from 'electron-vite'
+import type { ConfigEnv, UserConfig } from 'vite'
+import { loadEnv } from 'vite'
+import { wrapperEnv } from './build/utils'
 
 export default defineConfig({
-    main: {
+    main: defineViteConfig(({ command, mode }: ConfigEnv) => {
+        // The boolean type read by loadEnv is a string. This function can be converted to boolean type
+        const viteEnv = wrapperEnv(loadEnv(mode, process.cwd()), true)
+        if (command === 'serve') {
+            process.env.ELECTRON_RENDERER_URL = `http://localhost:${viteEnv.VITE_PORT}`
+        }
+
+        return {
             plugins: [externalizeDepsPlugin()],
+            envPrefix: ['MAIN_VITE_', 'VITE_', 'ELECTRON_'],
             build: {
                 rollupOptions: {
                     input: {
-                    index: resolve(__dirname, 'electron/main/index.ts'),
-                },
+                        index: resolve(__dirname, 'src-electron/main/index.ts'),
                     },
                 },
             },
+        }
+    }),
     preload: {
         plugins: [externalizeDepsPlugin()],
         build: {
             rollupOptions: {
                 input: {
-                    index: resolve(__dirname, 'electron/preload/index.ts'),
+                    index: resolve(__dirname, 'src-electron/preload/index.ts'),
                 },
             },
         },
     },
-    renderer: defineViteConfig(async (env) => {
-        const renderConfig = (await import('./vite.config')).default
-        const config = renderConfig(env)
+    renderer: defineViteConfig(async (env): Promise<UserConfig> => {
+        // 设置运行时环境，用于减少一些不必要的构建处理
+        process.env.RUNTIME = 'electron'
 
-        return merge(config, {
+        const defaultConfig = (await import('./vite.config')).default(env)
+        const config: UserConfig = {
+            envPrefix: 'VITE_',
             build: {
                 target: 'chrome80',
                 rollupOptions: {
@@ -36,6 +50,8 @@ export default defineConfig({
                     },
                 },
             },
-        })
+        }
+
+        return merge(defaultConfig, config)
     }),
 })

package.json

@@ -27,9 +27,11 @@
         "serve": "npm run dev",
         "dev": "vite",
         "dev:app": "electron-vite dev",
-        "build": "cross-env NODE_ENV=production vite build && esno ./build/script/postBuild.ts",
-        "build:test": "cross-env vite build --mode test && esno ./build/script/postBuild.ts",
-        "build:preview": "cross-env vite build --mode preview && esno ./build/script/postBuild.ts",
+        "preview:app": "electron-vite preview",
+        "build:app": "electron-vite build",
+        "build": "vite build",
+        "build:test": "vite build --mode test",
+        "build:preview": "vite build --mode preview",
         "build:no-cache": "pnpm clean:cache && npm run build",
         "report": "cross-env REPORT=true npm run build",
         "type:check": "vue-tsc --noEmit --skipLibCheck",
@@ -48,7 +50,11 @@
         "test:br": "npx http-server dist --cors --brotli -c-1",
         "reinstall": "rimraf pnpm-lock.yaml && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
         "prepare": "husky install",
-        "gen:icon": "esno ./build/generate/icon/index.ts"
+        "gen:icon": "esno ./build/generate/icon/index.ts",
+        "postinstall": "electron-builder install-app-deps",
+        "build:win": "npm run build:app && electron-builder --win --config",
+        "build:mac": "npm run build:app && electron-builder --mac --config",
+        "build:linux": "npm run build:app && electron-builder --linux --config"
     },
     "config": {
         "commitizen": {
@@ -63,6 +69,7 @@
         "@iconify/iconify": "^3.1.0",
         "@logicflow/core": "^1.2.1",
         "@logicflow/extension": "^1.2.1",
+        "@purge-icons/generated": "^0.9.0",
         "@stomp/stompjs": "^7.0.0",
         "@vue/runtime-core": "^3.2.47",
         "@vue/shared": "^3.2.47",
@@ -109,13 +116,12 @@
         "@electron-toolkit/tsconfig": "^1.0.1",
         "@electron/notarize": "^1.2.3",
         "@iconify/json": "^2.2.40",
-        "@purge-icons/generated": "^0.9.0",
         "@types/codemirror": "^5.60.7",
         "@types/crypto-js": "^4.1.1",
         "@types/fs-extra": "^11.0.1",
         "@types/inquirer": "^9.0.3",
         "@types/intro.js": "^5.1.1",
-        "@types/lodash": "^4.14.191",
+        "@types/lodash": "^4.14.192",
         "@types/lodash-es": "^4.17.7",
         "@types/mockjs": "^1.0.7",
         "@types/node": "^18.15.10",
@@ -126,8 +132,8 @@
         "@types/sockjs-client": "^1.5.1",
         "@types/sortablejs": "^1.15.1",
         "@types/stompjs": "^2.3.5",
-        "@typescript-eslint/eslint-plugin": "^5.56.0",
-        "@typescript-eslint/parser": "^5.56.0",
+        "@typescript-eslint/eslint-plugin": "^5.57.0",
+        "@typescript-eslint/parser": "^5.57.0",
         "@vitejs/plugin-legacy": "^4.0.2",
         "@vitejs/plugin-vue": "^4.1.0",
         "@vitejs/plugin-vue-jsx": "^3.0.1",

electron/main/index.ts → src-electron/main/index.ts

@@ -2,6 +2,14 @@ import * as path from 'node:path'
 import { BrowserWindow, app, shell } from 'electron'
 import { electronApp, is, optimizer } from '@electron-toolkit/utils'
 
+// 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'
+process.env.DIST_ELECTRON = path.join(__dirname, '..')
+process.env.DIST = path.join(process.env.DIST_ELECTRON, '../dist')
+process.env.PUBLIC = app.isPackaged ? __dirname : path.join(process.env.DIST_ELECTRON, '../public')
+
 function createWindow(): void {
     // Create the browser window.
     const mainWindow = new BrowserWindow({
@@ -34,7 +42,7 @@ function createWindow(): void {
     if (is.dev && process.env.ELECTRON_RENDERER_URL) {
         mainWindow.loadURL(process.env.ELECTRON_RENDERER_URL)
     } else {
-        mainWindow.loadFile(path.join(__dirname, '../../index.html'))
+        mainWindow.loadFile(path.join(process.env.DIST as string, 'index.html'))
     }
 }
 

tsconfig.json

 {
-    "compilerOptions": {
-        "esModuleInterop": true
-    },
-    "files": [],
     "references": [{ "path": "./tsconfig.web.json" }, { "path": "./tsconfig.node.json" }]
 }

tsconfig.node.json

@@ -7,5 +7,13 @@
             "/#/*": ["types/*"]
         }
     },
-    "include": ["package.json", "electron", "build", "vite.config.ts", "electron.vite.config.ts"]
+    "include": [
+        "package.json",
+        "src-electron",
+        "build",
+        "vite.config.ts",
+        "electron.vite.config.ts",
+        "types/**/*.d.ts",
+        "types/**/*.ts"
+    ]
 }

tsconfig.web.json

@@ -43,7 +43,8 @@
         "build/**/*.ts",
         "build/**/*.d.ts",
         "mock/**/*.ts",
-        "vite.config.ts"
+        "vite.config.ts",
+        "package.json"
     ],
     "exclude": ["node_modules", "tests/server/**/*.ts", "dist", "**/*.js"]
 }