当前位置: 首页 > 工具软件 > electron-egg > 使用案例 >

electron-egg 前端模块

厍胤运
2023-12-01

代码目录:./frontend

  • 可以使用任意前端技术
  • 项目中前端模块只是demo,你可以随意修改或删除
  • vue2、vue3、react、Angular、html等等
  1. 简单配置:
打开配置文件:./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' // 首页
      },
    }
  },

2. 只需一个文件:ipcRenderer.js

# 你的前端项目需要引入该文件,才能和electron业务层通信
# vue3或react用户,请修改其语法(当前为vue2)

3. 启动

  • vue模式【默认】
# 1:【进入前端目录】,启动vue
cd ./frontend
npm run serve

# 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

 类似资料: