ElectronEgg

简体中文

English

简体中文

English

主题

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

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

代码目录 ​

./frontend

特点 ​

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

通信 ​

只需一个文件：ipcRenderer.js

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

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

开发环境 ​

可同时启动 前端 & 主进程，也可以分开启动, 快速开始

配置 ./cmd/bin.js

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

TIP

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

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

构建前端资源 ​

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

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

推荐使用合并后的命令

配置 package.json

javascript
"scripts": {
  // 构建 并 移动
  "build-frontend": "ee-bin build --cmds=frontend && ee-bin move --flag=frontend_dist",
}

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

生产环境 ​

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

javascript
  /**
   * 主进程
   */     
  mainServer = {
    // protocol协议：file://
    protocol: 'file://',
    // 前端资源入口文件
    indexPath: '/public/dist/index.html',
    // 兼容electron参数
    // https://www.electronjs.org/zh/docs/latest/api/browser-window#winloadurlurl-options
    options: {} 
  };

file协议模式 ​

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

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

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

javascript
// 没有配置路径
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

编辑 vue.config.js文件

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

编辑 vite.config.js文件

javascript
export default defineConfig(() => {
  base: './',
}
  • react - webpack

编辑 webpack.config.js文件

javascript
module.exports = {
  output: {
    publicPath: "./",
  }
}
  • 其它前端技术类似。

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

web模式（待定） ​

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

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