Electron-Vite如何设置DevTools默认右侧停靠且重启不恢复？

方案一：使用 electron-store 持久化配置 #

这是最简便的实现方式，借助第三方库快速完成状态持久化：

1. 安装依赖

npm install electron-store

2. 修改主进程代码（main.js/main.ts）

import { app, BrowserWindow } from 'electron'
import Store from 'electron-store'
import path from 'path'

const store = new Store()

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 加载Vite开发服务地址
  mainWindow.loadURL('http://localhost:5173')

  // 读取保存的DevTools位置，默认设为右侧
  const devToolsPosition = store.get('devToolsPosition', 'right')
  
  // 打开DevTools并设置停靠模式
  mainWindow.webContents.openDevTools({ mode: devToolsPosition })

  // 监听位置变化，实时保存到本地
  mainWindow.webContents.devToolsWebContents.on('devtools-position-changed', (_, position) => {
    store.set('devToolsPosition', position)
  })
}

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

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

方案二：手动实现本地存储（无需第三方库） #

如果不想引入额外依赖，可直接用Node.js文件系统API实现配置持久化：

import { app, BrowserWindow } from 'electron'
import fs from 'fs'
import path from 'path'

// 配置文件存储路径
const userDataDir = app.getPath('userData')
const devToolsConfigFile = path.join(userDataDir, 'devtools-position.json')

// 读取配置
function loadDevToolsPosition() {
  try {
    const content = fs.readFileSync(devToolsConfigFile, 'utf-8')
    return JSON.parse(content).position || 'right'
  } catch {
    return 'right'
  }
}

// 保存配置
function saveDevToolsPosition(position) {
  fs.writeFileSync(devToolsConfigFile, JSON.stringify({ position }))
}

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadURL('http://localhost:5173')

  const position = loadDevToolsPosition()
  mainWindow.webContents.openDevTools({ mode: position })

  // 监听位置变更并保存
  mainWindow.webContents.devToolsWebContents.on('devtools-position-changed', (_, position) => {
    saveDevToolsPosition(position)
  })
}

// 窗口生命周期逻辑
app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

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

关键说明 #

• openDevTools 的 mode 参数支持：right（右侧停靠）、bottom（底部）、undocked（半分离）、detach（完全分离）
• devtools-position-changed 事件从 Electron 12+ 版本开始支持，请确保你的Electron版本满足要求
• 配置会保存在Electron的userData目录下，不同平台路径不同：
  • Windows: C:\Users\<用户名>\AppData\Roaming\<应用名>
  • macOS: ~/Library/Application Support/<应用名>
  • Linux: ~/.config/<应用名>

内容的提问来源于stack exchange，提问作者Heitor Rezende