From db2e830dfd3fae912271d2094d5df50e0b6f1033 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8D=89=E9=9E=8B=E6=B2=A1=E5=8F=B7?= <308487730@qq.com>
Date: Mon, 3 Oct 2022 09:16:14 +0800
Subject: [PATCH] v2.1.0: use `vite-electron-plugin` instead
`vite-plugin-electron`
---
.gitignore | 1 +
.vscode/launch.json | 3 +-
.vscode/tasks.json | 4 +--
electron-builder.json5 | 1 +
electron/electron-env.d.ts | 19 ++----------
electron/main/index.ts | 22 +++++++-------
package.json | 8 ++---
src/main.ts | 8 +++++
vite.config.ts | 60 +++++++++++++++++---------------------
9 files changed, 57 insertions(+), 69 deletions(-)
diff --git a/.gitignore b/.gitignore
index b4fa623..20e8660 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,4 @@ dist-ssr
release
.vscode/.debug.env
+dist-electron
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 3a8ce68..9250453 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -32,7 +32,8 @@
"--remote-debugging-port=9229",
"."
],
- "envFile": "${workspaceFolder}/.vscode/.debug.env"
+ "envFile": "${workspaceFolder}/.vscode/.debug.env",
+ "console": "integratedTerminal"
},
{
"name": "Debug Renderer Process",
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index a1bf353..3add5f7 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -12,6 +12,7 @@
"owner": "typescript",
"fileLocation": "relative",
"pattern": {
+ // TODO: correct "regexp"
"regexp": "^([a-zA-Z]\\:\/?([\\w\\-]\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
"file": 1,
"line": 3,
@@ -21,8 +22,7 @@
},
"background": {
"activeOnStart": true,
- "beginsPattern": "^.*building for development.*$",
- "endsPattern": "built in [0-9]*ms.*$",
+ "endsPattern": "^.*[startup] Electron App.*$",
}
}
}
diff --git a/electron-builder.json5 b/electron-builder.json5
index af6e609..65395f9 100644
--- a/electron-builder.json5
+++ b/electron-builder.json5
@@ -8,6 +8,7 @@
"output": "release/${version}"
},
"files": [
+ "dist-electron",
"dist"
],
"mac": {
diff --git a/electron/electron-env.d.ts b/electron/electron-env.d.ts
index b0ec4b6..3b33998 100644
--- a/electron/electron-env.d.ts
+++ b/electron/electron-env.d.ts
@@ -1,22 +1,9 @@
-///
+///
declare namespace NodeJS {
interface ProcessEnv {
- /**
- * The built directory structure
- *
- * ```tree
- * ├─┬ dist
- * │ ├─┬ electron
- * │ │ ├─┬ main
- * │ │ │ └── index.js
- * │ │ └─┬ preload
- * │ │ └── index.js
- * │ ├── index.html
- * │ ├── ...other-static-files-from-public
- * │
- * ```
- */
+ VSCODE_DEBUG?: 'true'
+ DIST_ELECTRON: string
DIST: string
/** /dist/ or /public/ */
PUBLIC: string
diff --git a/electron/main/index.ts b/electron/main/index.ts
index f961a63..d235a52 100644
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@@ -1,16 +1,16 @@
// The built directory structure
//
+// ├─┬ dist-electron
+// │ ├─┬ main
+// │ │ └── index.js > Electron-Main
+// │ └─┬ preload
+// │ └── index.js > Preload-Scripts
// ├─┬ dist
-// │ ├─┬ electron
-// │ │ ├─┬ main
-// │ │ │ └── index.js
-// │ │ └─┬ preload
-// │ │ └── index.js
-// │ ├── index.html
-// │ ├── ...other-static-files-from-public
-// │
-process.env.DIST = join(__dirname, '../..')
-process.env.PUBLIC = app.isPackaged ? process.env.DIST : join(process.env.DIST, '../public')
+// │ └── index.html > Electron-Renderer
+//
+process.env.DIST_ELECTRON = join(__dirname, '..')
+process.env.DIST = join(process.env.DIST_ELECTRON, '../dist')
+process.env.PUBLIC = app.isPackaged ? process.env.DIST : join(process.env.DIST_ELECTRON, '../public')
import { app, BrowserWindow, shell, ipcMain } from 'electron'
import { release } from 'os'
@@ -35,7 +35,7 @@ if (!app.requestSingleInstanceLock()) {
let win: BrowserWindow | null = null
// Here, you can also use other preload
const preload = join(__dirname, '../preload/index.js')
-const url = process.env.VITE_DEV_SERVER_URL as string
+const url = process.env.VITE_DEV_SERVER_URL
const indexHtml = join(process.env.DIST, 'index.html')
async function createWindow() {
diff --git a/package.json b/package.json
index 9822590..b377baa 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "electron-vue-vite",
- "version": "2.0.0",
- "main": "dist/electron/main/index.js",
+ "version": "2.1.0",
+ "main": "dist-electron/main/index.js",
"description": "Really simple Electron + Vue + Vite boilerplate.",
"author": "草鞋没号 <308487730@qq.com>",
"license": "MIT",
@@ -19,14 +19,12 @@
"electron-builder": "^23.3.3",
"typescript": "^4.7.4",
"vite": "^3.0.8",
- "vite-plugin-electron": "^0.9.3",
+ "vite-electron-plugin": "^0.4.1",
"vue": "^3.2.37",
"vue-tsc": "^0.40.1"
},
"debug": {
"env": {
- "VITE_DEV_SERVER_HOSTNAME": "127.0.0.1",
- "VITE_DEV_SERVER_PORT": 3344,
"VITE_DEV_SERVER_URL": "http://127.0.0.1:3344"
}
},
diff --git a/src/main.ts b/src/main.ts
index 730f3ac..258b4a2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,13 @@
import { createApp } from 'vue'
import App from './App.vue'
+
+/**
+ * If you enables use of Node.js API in the Renderer-process
+ * ```
+ * npm i -D vite-plugin-electron-renderer
+ * ```
+ * @see - https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#electron-renderervite-serve
+ */
// import './samples/node-api'
createApp(App)
diff --git a/vite.config.ts b/vite.config.ts
index bf4ae1a..9608727 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,49 +1,41 @@
import { rmSync } from 'fs'
-import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
-import electron, { onstart } from 'vite-plugin-electron'
+import electron from 'vite-electron-plugin'
+import { customStart } from 'vite-electron-plugin/plugin'
import pkg from './package.json'
-rmSync('dist', { recursive: true, force: true }) // v14.14.0
+rmSync('dist-electron', { recursive: true, force: true })
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
electron({
- main: {
- entry: 'electron/main/index.ts',
- vite: {
- build: {
- // For Debug
- sourcemap: true,
- outDir: 'dist/electron/main',
- },
- // Will start Electron via VSCode Debug
- plugins: [process.env.VSCODE_DEBUG ? onstart() : null],
- },
+ include: ['electron'],
+ transformOptions: {
+ sourcemap: !!process.env.VSCODE_DEBUG,
},
- preload: {
- input: {
- // You can configure multiple preload here
- index: path.join(__dirname, 'electron/preload/index.ts'),
- },
- vite: {
- build: {
- // For Debug
- sourcemap: 'inline',
- outDir: 'dist/electron/preload',
- },
- },
- },
- // Enables use of Node.js API in the Renderer-process
- // https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#electron-renderervite-serve
- renderer: {},
+ // Will start Electron via VSCode Debug
+ plugins: process.env.VSCODE_DEBUG
+ ? [customStart(debounce(() => console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App')))]
+ : undefined,
}),
],
- server: process.env.VSCODE_DEBUG ? {
- host: pkg.debug.env.VITE_DEV_SERVER_HOSTNAME,
- port: pkg.debug.env.VITE_DEV_SERVER_PORT,
- } : undefined,
+ server: process.env.VSCODE_DEBUG ? (() => {
+ const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)
+ return {
+ host: url.hostname,
+ port: +url.port,
+ }
+ })() : undefined,
+ clearScreen: false,
})
+
+function debounce void>(fn: Fn, delay = 299) {
+ let t: NodeJS.Timeout
+ return ((...args) => {
+ clearTimeout(t)
+ t = setTimeout(() => fn(...args), delay)
+ }) as Fn
+}