如何使Electron发布版应用支持用户可配置（含数据库参数）

一、在发布目录生成可编辑的JSON配置文件 #

核心思路是将配置文件放在Electron提供的用户数据目录（该目录为用户可读写区域，避免安装目录只读权限问题），首次启动时自动生成默认配置，同时提供便捷入口让用户找到并编辑文件。

1. 主进程初始化配置文件 #

在Electron主进程（main.js）中添加配置初始化逻辑：

const fs = require('fs');
const path = require('path');
const { app, ipcMain, shell } = require('electron');

// 获取用户数据目录（不同系统路径不同：Windows为AppData，macOS为Library/Application Support）
const userDataPath = app.getPath('userData');
const configPath = path.join(userDataPath, 'db-config.json');

// 默认数据库配置
const defaultDbConfig = {
  dbHost: 'localhost',
  dbPort: 3306,
  dbName: 'default_db',
  dbUser: 'root',
  dbPassword: '123456'
};

// 初始化配置文件：不存在则创建
function initConfigFile() {
  if (!fs.existsSync(configPath)) {
    fs.writeFileSync(configPath, JSON.stringify(defaultDbConfig, null, 2));
  }
}

// 监听渲染进程请求，打开配置文件所在目录
ipcMain.handle('open-config-dir', () => {
  shell.openPath(userDataPath);
});

// 应用启动时执行初始化
app.whenReady().then(() => {
  initConfigFile();
  // 其他启动逻辑（如创建窗口）
});

2. Angular端提供编辑入口 #

在Angular组件中添加按钮，调用主进程方法打开配置目录：

import { Component } from '@angular/core';
import { ElectronService } from 'ngx-electron';

@Component({
  selector: 'app-config',
  template: '<button (click)="openConfigDir()">编辑数据库配置</button>'
})
export class ConfigComponent {
  constructor(private electronService: ElectronService) {}

  openConfigDir() {
    this.electronService.ipcRenderer.invoke('open-config-dir');
  }
}

二、同步配置文件修改到应用中 #

通过监听配置文件变化，实时将更新同步到应用，并重新初始化数据库连接。

1. 主进程监听配置文件变化 #

在主进程中添加文件监听逻辑，变化时通知渲染进程：

// 监听配置文件修改
fs.watchFile(configPath, (curr, prev) => {
  if (curr.mtime !== prev.mtime) {
    try {
      const newConfig = JSON.parse(fs.readFileSync(configPath, 'utf8'));
      // 向所有渲染进程广播配置更新
      ipcMain.emit('db-config-updated', newConfig);
    } catch (err) {
      // 解析错误时通知渲染进程
      ipcMain.emit('db-config-error', '配置文件格式错误，请检查JSON语法');
    }
  }
});

// 提供获取当前配置的方法
ipcMain.handle('get-current-db-config', () => {
  return JSON.parse(fs.readFileSync(configPath, 'utf8'));
});

2. Angular端监听配置更新并重建连接 #

创建Angular服务处理配置更新和数据库连接：

import { Injectable, OnInit } from '@angular/core';
import { ElectronService } from 'ngx-electron';
import { Subject } from 'rxjs';
import * as mysql from 'mysql2/promise';

@Injectable({ providedIn: 'root' })
export class DbService {
  private connection: mysql.Connection | null = null;
  configUpdate$ = new Subject<any>();
  configError$ = new Subject<string>();

  constructor(private electronService: ElectronService) {
    // 监听主进程的配置更新事件
    this.electronService.ipcRenderer.on('db-config-updated', (_, newConfig) => {
      this.configUpdate$.next(newConfig);
      this.reconnectDatabase(newConfig);
    });

    // 监听配置错误
    this.electronService.ipcRenderer.on('db-config-error', (_, errorMsg) => {
      this.configError$.next(errorMsg);
    });

    // 应用启动时加载初始配置
    this.loadInitialConfig();
  }

  // 加载初始配置并连接数据库
  private async loadInitialConfig() {
    const config = await this.electronService.ipcRenderer.invoke('get-current-db-config');
    await this.reconnectDatabase(config);
  }

  // 重新建立数据库连接
  private async reconnectDatabase(config: any) {
    // 关闭旧连接
    if (this.connection) {
      await this.connection.end();
    }
    // 创建新连接
    try {
      this.connection = await mysql.createConnection({
        host: config.dbHost,
        port: config.dbPort,
        user: config.dbUser,
        password: config.dbPassword,
        database: config.dbName
      });
      console.log('数据库连接成功');
    } catch (err) {
      console.error('数据库连接失败:', err);
      this.configError$.next('数据库连接失败，请检查配置');
    }
  }

  // 对外提供数据库连接实例
  getConnection(): mysql.Connection | null {
    return this.connection;
  }
}

3. 组件中处理配置更新提示 #

在Angular组件中订阅配置更新和错误事件，给用户反馈：

import { Component, OnInit } from '@angular/core';
import { DbService } from './db.service';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="errorMsg" class="error">{{ errorMsg }}</div>
    <div *ngIf="updateMsg" class="success">{{ updateMsg }}</div>
  `
})
export class AppComponent implements OnInit {
  errorMsg: string | null = null;
  updateMsg: string | null = null;

  constructor(private dbService: DbService) {}

  ngOnInit() {
    this.dbService.configUpdate$.subscribe(() => {
      this.updateMsg = '配置已更新，数据库连接已重建';
      setTimeout(() => this.updateMsg = null, 3000);
    });

    this.dbService.configError$.subscribe(msg => {
      this.errorMsg = msg;
      setTimeout(() => this.errorMsg = null, 5000);
    });
  }
}

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