介绍

该模块负责界面渲染，以及与主进程通信，支持任何前端技术。

示例代码中，采用vue3 + vite4 。当然，你可以选择自己喜欢的技术栈。

# 代码目录

./frontend

# 特点

可以使用任意前端技术
项目中前端模块只是demo，你可以随意修改或删除
react、vite、vue2、vue3、Angular、html 等等

# 通信

只需一个文件：ipcRenderer.js

你的前端项目需要引入该文件，才能和 electron业务层 通信

# 文件位置
./electron-egg/frontend/src/utils/ipcRenderer.js

# 开发环境

ee-bin: v1.2.0

ee-core: v2.5.0

新版本可同时启动前端 & 主进程，也可以分开启动。

electron业务代码暂不支持热更（修改代码后需重新启动），如果前端启动时间长，则建议分开启动。

配置 package.json

  "scripts": {
    "dev": "ee-bin dev",
    "dev-frontend": "ee-bin dev --serve=frontend",
    "build-frontend": "ee-bin build",
  }

配置 ./electron/config/bin.js

  dev: {
    // frontend：前端服务
    // 说明：该配置的意思是，进入 frontend 目录，执行 npm run dev
    // 运行后的服务为 http://localhost:8080 
    // 如果 protocol 属性为 'file://' 那么不会执行命令，项目直接加载 indexPath 对应的文件。
    frontend: {
      directory: './frontend', // frontend 目录
      cmd: 'npm',              // 命令
      args: ['run', 'dev'],    // 参数，根据你的前端项目做适当修改
      protocol: 'http://',     // 协议：'http://' 'file://'
      hostname: 'localhost',   // hostname
      port: 8080,              // port
      indexPath: 'index.html'  // 'file://'协议时有效，入口文件
      force: false,            // 强制加载前端服务
    }
  },

同时启动 frontend (UI) 、electron 两个服务。

npm run dev

分开启动 frontend (UI) 、electron

# 打开两个终端
npm run dev-frontend

npm run dev-electron

提示

注1：如果启动的前端服务不是：http://localhost:8080/ 请先配置：config/bin.js 文件中的 frontend 对象

注2：如果打包后运行白屏，检查基础路径，检查资源是否移动，检查路由是否为 hash 模式。

# 构建前端资源并移动

ee-bin: v1.2.0

ee-bin: v1.4.0 增加move命令

生产环境最终加载的是 /public/dist 资源，因此需要把 ./frontend/dist 复制过去。

frontend目录代码不会被打包，防止源码泄露。

推荐使用合并后的命令

配置 package.json

"scripts": {
  // ee-bin: v1.4.0
  // 构建 并 移动
  "build-frontend": "ee-bin build --cmds=frontend && ee-bin move --flag=frontend_dist",
  // 构建
  "build-frontend": "ee-bin build --cmds=frontend",
  // 移动
  "rd": "ee-bin move --flag=frontend_dist",

  // ee-bin: v1.2.0
  // 构建 并 移动
  "build-frontend": "ee-bin build && ee-bin rd",
  // 构建
  "build-frontend": "ee-bin build",
  // 移动
  "rd": "ee-bin rd",
}

注：如果直接进入 frontend 目录，去执行 npm run build 时 (没有经过ee-bin)，process对象不包含renderer进程信息。

# 开发环境（旧）

旧版本使用，功能受限，请升级ee-bin和ee-core，参照上面文档。

开发环境下，渲染进程使用 developmentMode 配置。

打开配置文件

./electron/config.default.js

配置服务

// 开发模式前端服务（渲染进程）
  developmentMode: {
    default: 'vue', // 默认前后端分离，使用vue
    mode: {
    	// 前后端分离，使用vue开发，端口与vue启动的serve一致
      vue: {
        hostname: 'localhost',
        port: 8080
      },
      // 前后端分离，使用react开发，端口与react启动的serve一致
      react: {
        hostname: 'localhost',
        port: 3000
      },
      html: {
        hostname: 'localhost',
        indexPage: 'index.html' // 首页
      },
    }
  },

# 启动

vue模式【默认】

# 1：【进入前端目录】，启动vue
cd ./frontend
npm run dev

# 2：【根目录】，启动electron服务
npm run dev

react模式，同vue
html模式（不推荐，使用vue和react吧）

# 1：进入前端目录，并创建dist目录
cd ./frontend && mkdir dist

# 2: 编写html文件
index.html

# 3：【根目录】，启动electron服务
npm run dev

# 生产环境

生产环境下，主进程使用 mainServer 配置。

  /**
   * 主进程
   */     
  config.mainServer = {
    // protocol协议：http:// | https:// | file://
    protocol: 'file://',
    // 前端资源入口文件
    indexPath: '/public/dist/index.html',
    host: 'localhost',
    port: 7072, // 默认端口（如果端口被使用，则随机获取一个）
    ssl: {
        key: '/public/ssl/localhost+1.key', // key文件
        cert: '/public/ssl/localhost+1.pem' // cert文件
    },
    // 兼容electron参数
    // https://www.electronjs.org/zh/docs/latest/api/browser-window#winloadurlurl-options
    options: {} 
  };

protocol string - 支持：http://、 https://、file:// 三种协议，框架会创建不同服务。
indexPath string - 前端资源入口文件
host string - web模式服务地址（127.0.0.1 或 localhost）
port integer - web模式端口
ssl object - 使用https协议时的证书文件。
options object - 一些额外的参数。

# file协议模式

ee-core: 2.2.4

注意

electron-egg: v3.5.0 之后，默认使用 file 协议模式

file:// 模式不会创建server服务，性能稍好，但要配置 项目部署的基础路径。

因为构建后的 资源访问 与vue、react等框架的 基础路径 配置有关，没有server服务时，框架可能无法正常找到资源。

比如，主进程加载的css，js，img等资源的路径可能是这样

// 没有配置路径
file:///D:/css/app.8ada1737.css
file:///D:/js/app.73f33250.js

// 配置路径后
file:///D:/www/xing/ee/public/dist/css/app.8ada1737.css
file:///D:/www/xing/ee/public/dist/js/app.94339363.js

file:// 协议模式，请做如下修改：

编辑 vue.config.js文件

module.exports = {
  publicPath: './', // 相对路径，file模式和web模式都可以使用
}

vite

编辑 vite.config.js文件

export default defineConfig(() => {
  base: './',
}

react - webpack

编辑 webpack.config.js文件

module.exports = {
  output: {
    publicPath: "./",
  }
}

其它前端技术类似。

把 项目部署的基础路径 改为 相对路径，或能被访问到的路径（可用开发者工具栏查看资源路径是否正确）

# web模式

web模式（http/https）将会创建server服务来加载前端资源，兼容性好，但会多创建一个server服务。

可以使用vue、react、cocos、Angular 等各种前端技术，而无需做特殊修改。

上次更新: 2025/04/10, 03:07:49

← 生命周期控制器→