介绍

代码目录

bash


./frontend

特点

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

通信

只需一个文件：ipcRenderer.js

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

bash


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

开发环境

配置 package.json

bash


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

配置 ./electron/config/bin.js

bash


  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,            // 强制加载前端服务
    }
  },

打包的时候

bash


npm run build-frontend

生产环境

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

bash


  /**
   * 主进程
   */
  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 - 一些额外的参数。

介绍 ​

代码目录 ​

特点 ​

通信 ​

开发环境 ​

打包的时候 ​

生产环境 ​

介绍

代码目录

特点

通信

开发环境

打包的时候

生产环境