├── .gitignore ├── .npmrc ├── .vscode └── extensions.json ├── LICENSE ├── README-en_US.md ├── README.md ├── electron-builder.json5 ├── electron ├── electron-env.d.ts └── main │ └── index.ts ├── index.d.ts ├── index.html ├── package.json ├── plugin.json5 ├── public ├── logo.ico ├── logo.png └── vite.svg ├── scripts └── build.js ├── src ├── App.vue ├── assets │ └── vue.svg ├── main.ts ├── style.css └── vite-env.d.ts ├── tsconfig.json ├── tsconfig.node.json ├── utools └── preload.ts └── vite.config.ts /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | # lock files 27 | package-lock.json 28 | yarn.lock 29 | pnpm-lock.yaml 30 | 31 | # ignore upx 32 | upx 33 | 34 | # ginore dist electron 35 | dist-electron 36 | 37 | release -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | node-linker=hoisted 2 | public-hoist-pattern=* 3 | shamefully-hoist=true 4 | strict-peer-dependencies=false 5 | electron_mirror=https://npmmirror.com/mirrors/electron/ 6 | electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/ 7 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 QC2168 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README-en_US.md: -------------------------------------------------------------------------------- 1 | # utools-plugin-template 2 | 3 | A `Vite+Vue` template for `Utools` plugin development, allowing you to create your own `Utools` plugin more efficiently 4 | 5 | ## ✨ Features 6 | 7 | - 🌈 Out-of-the-box `Vite+Vue3` template for `Utools` plugin development 8 | - ⚡ Automatically injects `HMR` field in the development environment 9 | - 🦍 Automatically build `upx` package 10 | - 🧸 Builds `utools/preload` file to handle third-party dependencies 11 | - 🚀 Build desktop applications 12 | 13 | ## 🥩 Getting Started 14 | 15 | ### 🔗 Clone project 16 | 17 | ```bash 18 | git clone https://github.com/QC2168/utools-plugin-template.git 19 | ``` 20 | 21 | ### 🔧 Install dependencies 22 | 23 | > It is recommended to use the `pnpm` package management tool. If you have not installed it yet, you can execute `npm install -g pnpm` to install it 24 | 25 | ```bash 26 | pnpm install 27 | ``` 28 | 29 | ### 🛫 Run project 30 | 31 | ```bash 32 | pnpm dev 33 | ``` 34 | 35 | ### 📦 Build project 36 | 37 | ```bash 38 | pnpm build 39 | ``` 40 | 41 | > When executing the `build` command, the plugin will be directly built into an `upx` package. Developers do not need to perform a secondary build in the `utools` developer tool 🚀 42 | 43 | ### How to start the plugin 44 | 45 | In `utools`, open the `Utools` developer tool and create a new project 46 | 47 | According to your actual situation, fill in the information required by the plugin 48 | 49 | ![20231110155724](https://raw.githubusercontent.com/QC2168/note-img/main/20231110155724.png) 50 | 51 | Execute the `dev` command to generate the `dist` folder and select the file path `/dist/plugin.json` 52 | 53 | ![20231110155834](https://raw.githubusercontent.com/QC2168/note-img/main/20231110155834.png) 54 | 55 | ![20231110155947](https://raw.githubusercontent.com/QC2168/note-img/main/20231110155947.png) 56 | 57 | Start the plugin and trigger the first keyword of the plugin 58 | 59 | ![20231110160045](https://raw.githubusercontent.com/QC2168/note-img/main/20231110160045.png) 60 | 61 | ![20231110160101](https://raw.githubusercontent.com/QC2168/note-img/main/20231110160101.png) 62 | 63 | ![20231110160121](https://raw.githubusercontent.com/QC2168/note-img/main/20231110160121.png) 64 | 65 | Embark on your development journey~ 66 | 67 | ## 🍭 Finally 68 | 69 | If you have better ideas, please submit an `issue` or `pr` 🥰🥰 70 | 71 | If you find this project helpful, you can support me by clicking the 'star' button in the upper right corner. Thank you~ 😘😘. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # utools-plugin-template 2 | 3 | 基于`Vite+Vue`的`Utools`插件开发模板，让您更快的开发出一款属于自己的`Utools`插件 4 | 5 | 6 | 7 | **中文文档** | [English](https://github.com/QC2168/utools-plugin-template/blob/main/README-en_US.md) 8 | 9 | ## ✨ 特性 10 | 11 | - 🌈 开箱即用的`Vite+Vue3+TS`的`Utools`插件开发模板 12 | - ⚡ 开发环境自动注入`HMR`字段 13 | - 🦍 自动构建`upx`包 14 | - 🧸 构建`utools/preload`文件，自动处理插件第三方依赖（依赖脚本位于`script/build.js`） 15 | - 🚀 构建桌面应用（`electron` 不需要可移除） 16 | 17 | ## 🥩 开始使用 18 | 19 | ### 🔗 克隆项目 20 | 21 | ```bash 22 | git clone https://github.com/QC2168/utools-plugin-template.git 23 | ``` 24 | 25 | ### 🔧 安装依赖 26 | 27 | > 推荐使用`pnpm`包管理工具，如果您还没有安装可以执行`npm install -g pnpm`进行安装 28 | 29 | ```bash 30 | pnpm install 31 | ``` 32 | 33 | ### 🛫 启动项目 34 | 35 | ```bash 36 | pnpm dev 37 | ``` 38 | 39 | ### 📦 打包项目 40 | 41 | ```bash 42 | pnpm build 43 | ``` 44 | 45 | > 执行`build`命令时，会将插件直接构建成`upx`包，开发者无需在`utools`开发者工具中二次构建 🚀 46 | 47 | ### 多个preload文件处理 48 | 49 | > 原理：通过读取提供的`preload.js`文件，获取所需的依赖包后，在插件打包目录下执行`npm install`实现依赖安装 50 | 51 | ```js 52 | import { install } from '@qc2168/vite-plugin-utools'; 53 | // 添加编译后的preload文件 54 | install(['./dist/preload.js']); 55 | 56 | ``` 57 | 58 | ### 如何启动插件 59 | 60 | 在`utools`中，打开`utools`开发者工具，并新建一个项目 61 | 62 | 根据您的实际情况，填写插件所需信息 63 | 64 | ![20231110155724](https://raw.githubusercontent.com/QC2168/note-img/main/20231110155724.png) 65 | 66 | 执行`dev`指令，生成`dist`文件夹，将文件路径选中`/dist/plugin.json` 67 | 68 | ![20231110155834](https://raw.githubusercontent.com/QC2168/note-img/main/20231110155834.png) 69 | 70 | ![20231110155947](https://raw.githubusercontent.com/QC2168/note-img/main/20231110155947.png) 71 | 72 | 启动插件，并触发插件第一个关键字 73 | 74 | ![20231110160045](https://raw.githubusercontent.com/QC2168/note-img/main/20231110160045.png) 75 | 76 | ![20231110160101](https://raw.githubusercontent.com/QC2168/note-img/main/20231110160101.png) 77 | 78 | ![20231110160121](https://raw.githubusercontent.com/QC2168/note-img/main/20231110160121.png) 79 | 80 | 开始你的开发之旅吧~ 81 | 82 | ## 🍭 最后 83 | 84 | 如果您有更好的想法，欢迎提交`issue`或者`pr` 🥰🥰 85 | 86 | 如果您觉得这个项目对您有帮助，可以点击右上角的`star`按钮支持一下我，谢谢您~ 😘😘 87 | -------------------------------------------------------------------------------- /electron-builder.json5: -------------------------------------------------------------------------------- 1 | /** 2 | * @see https://www.electron.build/configuration/configuration 3 | */ 4 | { 5 | "$schema": "https://raw.githubusercontent.com/electron-userland/electron-builder/master/packages/app-builder-lib/scheme.json", 6 | "appId": "YourAppID", 7 | "asar": true, 8 | "productName": "YourAppName", 9 | "icon":"public/logo.ico", 10 | "directories": { 11 | "output": "release/${version}" 12 | }, 13 | "files": [ 14 | "dist", 15 | "dist-electron" 16 | ], 17 | "mac": { 18 | "target": [ 19 | "dmg" 20 | ], 21 | "artifactName": "${productName}-Mac-${version}-Installer.${ext}" 22 | }, 23 | "win": { 24 | "target": [ 25 | { 26 | "target": "nsis", 27 | "arch": [ 28 | "x64" 29 | ] 30 | } 31 | ], 32 | "artifactName": "${productName}-Windows-${version}-Setup.${ext}" 33 | }, 34 | "nsis": { 35 | "oneClick": false, 36 | "perMachine": false, 37 | "allowToChangeInstallationDirectory": true, 38 | "deleteAppDataOnUninstall": false 39 | }, 40 | "linux": { 41 | "target": [ 42 | "AppImage" 43 | ], 44 | "artifactName": "${productName}-Linux-${version}.${ext}" 45 | }, 46 | } 47 | -------------------------------------------------------------------------------- /electron/electron-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare namespace NodeJS { 4 | interface ProcessEnv { 5 | VSCODE_DEBUG?: 'true' 6 | DIST_ELECTRON: string 7 | DIST: string 8 | /** /dist/ or /public/ */ 9 | VITE_PUBLIC: string 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /electron/main/index.ts: -------------------------------------------------------------------------------- 1 | // copy from https://github.com/electron-vite/electron-vite-vue/blob/main/electron/main/index.ts 2 | import { app, BrowserWindow, shell, ipcMain } from 'electron' 3 | import { release } from 'node:os' 4 | import { join } from 'node:path' 5 | 6 | // The built directory structure 7 | // 8 | // ├─┬ dist-electron 9 | // │ ├─┬ main 10 | // │ │ └── index.js > Electron-Main 11 | // │ └─┬ preload 12 | // │ └── index.js > Preload-Scripts 13 | // ├─┬ dist 14 | // │ └── index.html > Electron-Renderer 15 | // 16 | process.env.DIST_ELECTRON = join(__dirname, '..') 17 | process.env.DIST = join(process.env.DIST_ELECTRON, '../dist') 18 | process.env.VITE_PUBLIC = process.env.VITE_DEV_SERVER_URL 19 | ? join(process.env.DIST_ELECTRON, '../public') 20 | : process.env.DIST 21 | 22 | // Disable GPU Acceleration for Windows 7 23 | if (release().startsWith('6.1')) app.disableHardwareAcceleration() 24 | 25 | // Set application name for Windows 10+ notifications 26 | if (process.platform === 'win32') app.setAppUserModelId(app.getName()) 27 | 28 | if (!app.requestSingleInstanceLock()) { 29 | app.quit() 30 | process.exit(0) 31 | } 32 | 33 | // Remove electron security warnings 34 | // This warning only shows in development mode 35 | // Read more on https://www.electronjs.org/docs/latest/tutorial/security 36 | // process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true' 37 | 38 | let win: BrowserWindow | null = null 39 | // Here, you can also use other preload 40 | const preload = join(__dirname, '../preload/preload.js') 41 | const url = process.env.VITE_DEV_SERVER_URL 42 | const indexHtml = join(process.env.DIST, 'index.html') 43 | 44 | async function createWindow() { 45 | win = new BrowserWindow({ 46 | title: 'Main window', 47 | webPreferences: { 48 | preload, 49 | // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production 50 | // Consider using contextBridge.exposeInMainWorld 51 | // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation 52 | nodeIntegration: true, 53 | contextIsolation: false, 54 | nodeIntegrationInWorker: true, 55 | }, 56 | }) 57 | 58 | if (url) { // electron-vite-vue#298 59 | win.loadURL(url) 60 | // Open devTool if the app is not packaged 61 | win.webContents.openDevTools({ mode: 'detach' }) 62 | } else { 63 | win.loadFile(indexHtml) 64 | } 65 | 66 | // Test actively push message to the Electron-Renderer 67 | win.webContents.on('did-finish-load', () => { 68 | win?.webContents.send('main-process-message', new Date().toLocaleString()) 69 | }) 70 | 71 | // Make all links open with the browser, not with the application 72 | win.webContents.setWindowOpenHandler(({ url }) => { 73 | if (url.startsWith('https:')) shell.openExternal(url) 74 | return { action: 'deny' } 75 | }) 76 | // win.webContents.on('will-navigate', (event, url) => { }) #344 77 | } 78 | 79 | app.whenReady().then(createWindow) 80 | 81 | app.on('window-all-closed', () => { 82 | win = null 83 | if (process.platform !== 'darwin') app.quit() 84 | }) 85 | 86 | app.on('second-instance', () => { 87 | if (win) { 88 | // Focus on the main window if the user tried to open another 89 | if (win.isMinimized()) win.restore() 90 | win.focus() 91 | } 92 | }) 93 | 94 | app.on('activate', () => { 95 | const allWindows = BrowserWindow.getAllWindows() 96 | if (allWindows.length) { 97 | allWindows[0].focus() 98 | } else { 99 | createWindow() 100 | } 101 | }) 102 | 103 | // New window example arg: new windows url 104 | ipcMain.handle('createChildWindow', (_, arg) => { 105 | const childWindow = new BrowserWindow({ 106 | webPreferences: { 107 | preload, 108 | nodeIntegration: true, 109 | contextIsolation: false, 110 | }, 111 | }) 112 | 113 | if (process.env.VITE_DEV_SERVER_URL) { 114 | childWindow.loadURL(`${url}#${arg}`) 115 | } else { 116 | childWindow.loadFile(indexHtml, { hash: arg }) 117 | } 118 | }) -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | export interface ProcessVersions { 2 | node: () => string; 3 | chrome: () => string; 4 | electron: () => string; 5 | } 6 | 7 | declare global { 8 | interface Window { 9 | versions: ProcessVersions; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Utools插件开发模板 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "utools-plugin-template", 3 | "type": "module", 4 | "private": true, 5 | "main": "dist-electron/main/index.js", 6 | "version": "0.0.0", 7 | "author": "QC2168", 8 | "description": "Easily create utools plugins", 9 | "scripts": { 10 | "dev": "vite", 11 | "dev:electron": "vite --mode=electron", 12 | "build": "vue-tsc && vite build && node ./scripts/build.js", 13 | "build:electron": "vue-tsc && vite build --mode=electron && electron-builder", 14 | "preview": "vite preview" 15 | }, 16 | "dependencies": { 17 | "@qc2168/vite-plugin-utools": "^1.6.0", 18 | "vue": "^3.5.13" 19 | }, 20 | "devDependencies": { 21 | "@types/node": "^20.17.9", 22 | "@vitejs/plugin-vue": "^5.2.1", 23 | "electron": "^31.7.6", 24 | "electron-builder": "^25.1.8", 25 | "typescript": "^5.6.3", 26 | "utools-api-types": "^5.2.0", 27 | "vite": "^6.0.3", 28 | "vite-plugin-electron": "^0.29.0", 29 | "vue-tsc": "^2.1.10" 30 | }, 31 | "env": { 32 | "VITE_DEV_SERVER_HOST": "127.0.0.1", 33 | "VITE_DEV_SERVER_PORT": 9000 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /plugin.json5: -------------------------------------------------------------------------------- 1 | { 2 | // 下列属性为插件必需属性，了解更多属性请往前 官方文档-完整配置篇 3 | // https://www.u.tools/docs/developer/config.html 4 | // 插件图标路径 5 | logo: "logo.png", 6 | // 预加载脚本 7 | preload: "preload.js", 8 | // 插件入口页面 9 | main: "index.html", 10 | // 插件ID 11 | name: "your plugin ID", 12 | // 版本号 13 | version: "1.0.0", 14 | // 显示名称 15 | pluginName: "template", 16 | // 描述 17 | description: "plugin template", 18 | // 作者 19 | author: "QC2168", 20 | // 主页 21 | homepage: "https://github.com/QC2168", 22 | // 功能列表 23 | features: [ 24 | { 25 | // 功能代码 26 | code: "template", 27 | // 功能说明 28 | explain: "插件模板主界面", 29 | // 触发命令 30 | cmds: [ 31 | "template" 32 | ] 33 | } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /public/logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QC2168/utools-plugin-template/21f6940b81de61f51eab0d5e4b8adad710520978/public/logo.ico -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/QC2168/utools-plugin-template/21f6940b81de61f51eab0d5e4b8adad710520978/public/logo.png -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /scripts/build.js: -------------------------------------------------------------------------------- 1 | import { install } from '@qc2168/vite-plugin-utools'; 2 | 3 | install(['./dist/preload.js']); 4 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 37 | -------------------------------------------------------------------------------- /src/assets/vue.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import './style.css' 3 | import App from './App.vue' 4 | 5 | createApp(App).mount('#app') 6 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | -webkit-text-size-adjust: 100%; 15 | } 16 | 17 | a { 18 | font-weight: 500; 19 | color: #646cff; 20 | text-decoration: inherit; 21 | } 22 | a:hover { 23 | color: #535bf2; 24 | } 25 | 26 | body { 27 | margin: 0; 28 | display: flex; 29 | place-items: center; 30 | min-width: 320px; 31 | min-height: 100vh; 32 | } 33 | 34 | h1 { 35 | font-size: 3.2em; 36 | line-height: 1.1; 37 | } 38 | 39 | button { 40 | border-radius: 8px; 41 | border: 1px solid transparent; 42 | padding: 0.6em 1.2em; 43 | font-size: 1em; 44 | font-weight: 500; 45 | font-family: inherit; 46 | background-color: #1a1a1a; 47 | cursor: pointer; 48 | transition: border-color 0.25s; 49 | } 50 | button:hover { 51 | border-color: #646cff; 52 | } 53 | button:focus, 54 | button:focus-visible { 55 | outline: 4px auto -webkit-focus-ring-color; 56 | } 57 | 58 | .card { 59 | padding: 2em; 60 | } 61 | 62 | #app { 63 | max-width: 1280px; 64 | margin: 0 auto; 65 | padding: 2rem; 66 | text-align: center; 67 | } 68 | 69 | @media (prefers-color-scheme: light) { 70 | :root { 71 | color: #213547; 72 | background-color: #ffffff; 73 | } 74 | a:hover { 75 | color: #747bff; 76 | } 77 | button { 78 | background-color: #f9f9f9; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "module": "ESNext", 6 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "preserve", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true, 22 | "types": ["node", "utools-api-types"] 23 | }, 24 | "include": [ 25 | "src/**/*.ts", 26 | "src/**/*.d.ts", 27 | "src/**/*.tsx", 28 | "src/**/*.vue", 29 | "*.d.ts", 30 | "utools/**/*.ts", 31 | "electron/**/*.ts", 32 | "electron/**/*.d.ts" 33 | ], 34 | "references": [{ "path": "./tsconfig.node.json" }] 35 | } 36 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["vite.config.ts","package.json"] 10 | } 11 | -------------------------------------------------------------------------------- /utools/preload.ts: -------------------------------------------------------------------------------- 1 | // 您可以在进行窗口交互 2 | // utools文档 3 | 4 | // https://www.u.tools/docs/developer/api.html#%E7%AA%97%E5%8F%A3%E4%BA%A4%E4%BA%92 5 | window.versions={ 6 | node: () => process.versions.node, 7 | chrome: () => process.versions.chrome, 8 | electron: () => process.versions.electron 9 | } 10 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import utools, { BuildMode } from '@qc2168/vite-plugin-utools' 3 | import vue from '@vitejs/plugin-vue' 4 | import pkg from './package.json' 5 | import electron from 'vite-plugin-electron' 6 | import { rmSync } from 'node:fs' 7 | import { notBundle } from 'vite-plugin-electron/plugin' 8 | 9 | 10 | 11 | // https://vitejs.dev/config/ 12 | export default defineConfig(({ command, mode }) => { 13 | rmSync('dist-electron', { recursive: true, force: true }) 14 | 15 | const isServe = command === 'serve' 16 | const isBuild = command === 'build' 17 | const isStartElectron = mode === 'electron' 18 | const sourcemap = isServe || !!process.env.VSCODE_DEBUG 19 | return { 20 | base: './', 21 | plugins: [vue(), 22 | utools({ 23 | entry: [ 24 | { entry: 'utools/preload.ts', 25 | // 是否忽略打包第三方依赖 26 | mode: isBuild ? BuildMode.ExcludeDependencies : BuildMode.IncludeDependencies 27 | } 28 | ], 29 | hmr: true, 30 | }), 31 | isStartElectron && electron([ 32 | { 33 | // Main process entry file of the Electron App. 34 | entry: 'electron/main/index.ts', 35 | onstart({ startup }) { 36 | if (process.env.VSCODE_DEBUG) { 37 | console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App') 38 | } else { 39 | startup() 40 | } 41 | }, 42 | vite: { 43 | build: { 44 | sourcemap, 45 | minify: isBuild, 46 | outDir: 'dist-electron/main', 47 | rollupOptions: { 48 | // Some third-party Node.js libraries may not be built correctly by Vite, especially `C/C++` addons, 49 | // we can use `external` to exclude them to ensure they work correctly. 50 | // Others need to put them in `dependencies` to ensure they are collected into `app.asar` after the app is built. 51 | // Of course, this is not absolute, just this way is relatively simple. :) 52 | external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}), 53 | }, 54 | }, 55 | plugins: [ 56 | // This is just an option to improve build performance, it's non-deterministic! 57 | // e.g. `import log from 'electron-log'` -> `const log = require('electron-log')` 58 | isServe && notBundle(), 59 | ], 60 | }, 61 | }, 62 | { 63 | entry: 'utools/preload.ts', 64 | onstart({ reload }) { 65 | // Notify the Renderer process to reload the page when the Preload scripts build is complete, 66 | // instead of restarting the entire Electron App. 67 | reload() 68 | }, 69 | vite: { 70 | build: { 71 | sourcemap: sourcemap ? 'inline' : undefined, // #332 72 | minify: isBuild, 73 | outDir: 'dist-electron/preload', 74 | rollupOptions: { 75 | external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}), 76 | }, 77 | }, 78 | plugins: [ 79 | isServe && notBundle(), 80 | ], 81 | }, 82 | } 83 | ]), 84 | ], 85 | server: { 86 | host: pkg.env.VITE_DEV_SERVER_HOST, 87 | port: pkg.env.VITE_DEV_SERVER_PORT, 88 | }, 89 | } 90 | }) 91 | --------------------------------------------------------------------------------