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
import { resolve } from 'path'
import { defineConfig } from 'electron-vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  main: {
    build: {
      rollupOptions: {
        input: {
          index: resolve(__dirname, 'src/main/index.ts')
        },
        external: [] // 如需外部化特定依赖，可在这里配置，例如 ['electron']
      }
    }
  },
  preload: {
    build: {
      rollupOptions: {
        input: {
          index: resolve(__dirname, 'src/preload/index.ts')
        },
        external: []
      }
    }
  },
  renderer: {
    root: resolve(__dirname, 'src/renderer/'),
    plugins: [vue()],
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src/renderer/src')
      }
    },
    server: {
      port: 5173,
      strictPort: true
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// src/main/index.ts
import { app, BrowserWindow, type BrowserWindowConstructorOptions } from 'electron'
import path from 'path'

// 这样就有完整的类型提示了
const createWindow = (): void => {
  const options: BrowserWindowConstructorOptions = {
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, '../preload/index.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  }
  const mainWindow = new BrowserWindow(options)
  // ... 其他代码
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// render/src/router/index.ts
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue' // 如果你有这个页面

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: () => import('../views/About.vue') } // 懒加载
]

const router = createRouter({
  history: createWebHashHistory(), // Electron 推荐用 Hash 模式，避免打包后路径问题
  routes
})

export default router

1
2
3
4
5
6
7
8
9
10
11
// render/src/stores/counter.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

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
// render/src/utils/request.ts
import axios from 'axios'

const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000
})

// 请求拦截器（比如添加 Token）
service.interceptors.request.use(
  (config) => {
    // 示例：从 Pinia 或 localStorage 取 Token
    // const token = localStorage.getItem('token')
    // if (token) config.headers.Authorization = `Bearer ${token}`
    return config
  },
  (error) => Promise.reject(error)
)

// 响应拦截器（处理错误）
service.interceptors.response.use(
  (response) => response.data,
  (error) => {
    console.error('请求失败:', error)
    return Promise.reject(error)
  }
)

export default service

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// render/src/main.ts
import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)

const pinia = createPinia()
app.use(pinia)

app.use(router)

app.mount('#app')

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
import { app, shell, BrowserWindow, ipcMain, session } from 'electron' // 新增 session，用于加载 Chrome 扩展
import { join, resolve } from 'path' // 新增 resolve，用于精准解析扩展路径
import { electronApp, optimizer, is } from '@electron-toolkit/utils'
import icon from '../../resources/icon.png?asset'

function createWindow(): 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()
  })

  mainWindow.webContents.setWindowOpenHandler((details) => {
    shell.openExternal(details.url)
    return { action: 'deny' }
  })

  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
  } else {
    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
  }
}

// 仅开发环境加载 Vue DevTools 的函数
async function loadVueDevTools(): Promise<void> {
  if (!is.dev) return // 仅开发环境执行，生产环境直接返回

  try {
    // 根据实际路径改动
    const devtoolsPath = resolve(__dirname, '../../devtools/7.7.7_0')
    // 使用 session 加载本地 Chrome 扩展，loadExtension会显示已弃用，但仍然可用
    const extension = await session.defaultSession.loadExtension(devtoolsPath)
    console.log(`Vue DevTools 加载成功: ${extension.name}`)
  } catch (err) {
    console.error('Vue DevTools 加载失败:', err)
  }
}

// 将回调函数改为 async，以支持 await 加载扩展
app.whenReady().then(async () => {
  electronApp.setAppUserModelId('com.electron')

  app.on('browser-window-created', (_, window) => {
    optimizer.watchWindowShortcuts(window)
  })

  // 在创建窗口前加载 Vue DevTools（仅开发环境）
  await loadVueDevTools()

  ipcMain.on('ping', () => console.log('pong'))

  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})