electron-vite-vue3-ts 快速开始
一、安装依赖
二、快速构建
1
| pnpm create @quick-start/electron <项目名称> --template vue-ts
|
三、项目结构
1.结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| ├──src
│ ├──main
│ │ ├──index.ts
│ │ └──...
│ ├──preload
│ │ ├──index.ts
│ │ └──...
│ └──renderer
│ ├──src
│ ├──index.html
│ └──...
├──electron.vite.config.ts
├──package.json
└──...
|
2.main/index.ts 代码解释
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
| import { app, BrowserWindow, ipcMain } from 'electron'
import { join } from 'path'
import { electronApp, optimizer, is } from '@electron-toolkit/utils'
import icon from '../../resources/icon.png?asset'
const createWindow: Function = (): void => {
const mainWindow = new BrowserWindow({
width: 900,
height: 670,
show: false,
autoHideMenuBar: true,
...(process.platform === 'linux' ? { icon } : {}),
webPreferences: {
preload: join(__dirname, '../preload/index.js'),
sandbox: false
}
})
mainWindow.on('ready-to-show', () => {
mainWindow.show()
})
if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
} else {
mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
}
}
app.whenReady().then(() => {
electronApp.setAppUserModelId('com.amane')
app.on('browser-window-created', (_, window) => {
optimizer.watchWindowShortcuts(window)
})
ipcMain.on('ping', () => console.log('pong'))
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
|
3.preload/index.ts 代码解释
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| import { contextBridge } from 'electron'
import { electronAPI } from '@electron-toolkit/preload'
const api = {}
if (process.contextIsolated) {
try {
contextBridge.exposeInMainWorld('electron', electronAPI)
contextBridge.exposeInMainWorld('api', api)
} catch (error) {
console.error(error)
}
} else {
window.electron = electronAPI
window.api = api
}
|
四、生产环境打包
1.打包指令
构建好的项目打包默认不生成安装文件，需要手动指定
1
2
3
4
| pnpm run build # 打包不编译
pnpm run build:win # Windows
pnpm run build:mac # Mac
pnpm run build:linux # Linux
|
2.配置文件 electron-builder.yml 代码解释
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
appId: com.amane.example
productName: electron-vite-test
directories:
buildResources: build
output: dist
files:
- '!**/.vscode/*'
- '!src/*'
- '!electron.vite.config.{js,ts,mjs,cjs}'
- '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
- '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
- '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
asarUnpack:
- resources/**
win:
target:
- nsis
icon: 'build/icon.ico'
nsis:
oneClick: false
perMachine: true
allowToChangeInstallationDirectory: true
createDesktopShortcut: always
shortcutName: "${productName}"
mac:
target:
- dmg
icon: 'build/icon.icns'
category: "public.app-category.utilities"
hardenedRuntime: true
entitlements: "build/entitlements.mac.plist"
entitlementsInherit: "build/entitlements.mac.inherit.plist"
gatekeeperAssess: false
dmg:
background: "build/background.png"
icon: "build/icon.icns"
iconSize: 100
artifactName: "${productName}-v${version}.${ext}"
linux:
target:
- AppImage
- snap
- deb
maintainer: ${author}
vendor: "Your Company"
synopsis: "一个简短的应用描述"
description: "一个详细的应用描述"
category: "Utility"
appImage:
artifactName: ${name}-${version}.${ext}
publish:
provider: generic
url: "https://example.com/updates/"
npmRebuild: false
|
五、备注
该项目没有装配大多数常见依赖（如 router、pinia 等），需手动添加。
