项目目录结构

│ .electron-vue   // 项目配置
│  │  config.json   // 自定义配置文件
│  │
│  ├─config   // 项目配置文件夹
│  │  │  config.js   // 处理配置
│  │  │
│  │  └─project    // 项目
│  │      │  jepaas.js   // JEPaaS云平台
│  │      │
│  │      └─icons    // 应用程序图标
│  │          ├─jepaas   // JEPaaS云平台
│  ├─util  // 工具类
│  │      compress.js  // 压缩代码
│  │      rewritePackage.js  // 重写package.json 以及一些方法
│  │
│  └─webpack  // webpack
│          build.js  // 打包正式
│          dev-client.js
│          dev-runner.js  // 本地启动
│          muti-page.config.js  // 多页面配置
│          webpack.main.config.js
│          webpack.renderer.config.js
│          webpack.web.config.js
│
├─build  // 打包构建后的应用程序
├─dist   // 打包构建后的src源代码

├─src  // 项目源代码
│  ├─main  // 主进程代码
│  │      events.js  // 所有的事件监听操作
│  │      index.dev.js
│  │      index.js  // 主入口文件
│  │      shortcut.js  // 快捷键
│  │      tray.js  // 托盘图标
│  │      update.js  // 更新
│  │      url-map.js  // 路径管理
│  │      windows.js  // 窗口
│  │      menu.js  // 菜单
│  │      server.js  // 代理服务
│  │      store.js  // 存储
│  │
│  └─renderer  // 渲染进程代码
│      ├─i18n  // 国际化
│      │  └─lang
│      │          en.js  // 英文
│      │          zh.js  // 中文
│      │
│      ├─pages  // 所有的页面
│      │  ├─config  // 配置页面
│      │  │  │  index.ejs  // 模板ejs
│      │  │  │  index.js  // 入口js
│      │  │  │  index.vue  //主页面
│      │  │  │
│      │  │  ├─actions  // 接口和请求封装
│      │  │  │      actions.js
│      │  │  │      api.js
│      │  │  ├─components  // 组件
│      │  │  │      about.vue  // 关于
│      │  │  │      clearCache.vue  // 清除缓存
│      │  │  │      proxy.vue  // 代理设置
│      │  │  │      upgrade.vue  // 更新管理
│      │  │  │
│      │  │  └─router  // 路由
│      │  │
│      │  └─login  // 登录页面
│      │      │  index.ejs
│      │      │  index.js
│      │      │  index.vue
│      │      │
│      │      ├─actions
│      │      │      actions.js
│      │      │      api.js
│      │      │
│      │      ├─assets  // 静态资源文件
│      │      │
│      │      ├─components  // 组件
│      │      │      company.vue  // 选择租户列表
│      │      │      findPassword.vue  // 忘记密码
│      │      │      login.vue  // 登录
│      │      │      register.vue  // 注册
│      │      │      scanCode.vue  // 快捷登录
│      │      │
│      │      ├─config  // 配置
│      │      │      config.js  // 登录配置
│      │      │
│      │      ├─router  // 路由
│      │      │      index.js
│      │      │
│      │      ├─util  // 工具
│      │      │      util.js
│      │      │
│      │      └─validateLang  // 校验国际化
│      │              serveError.js
│      │              validError.js
│      │
│      ├─store
│      │  │  index.js
│      │  │
│      │  └─modules
│      │          Counter.js
│      │          index.js
│      │
│      └─util  // 工具
│              ajax.js  // ajax封装
│              cookie.js  // cookie认证封装
│              util.js  // 所有的公用方法
│
└─static  // 静态资源

项目运行脚本解析

  • npm run build:
    打包桌面端所需要的依赖,该命令如运行正常,会在项目目录下生成build文件夹,内有Windows .exe 安装包等等

  • npm run mac:
    打包桌面端所需要的依赖,该命令如运行正常,会在项目目录下生成build文件夹,内有MacOS .dmg 安装包等等

  • npm run dev:
    本地调试命令。

  • npm run changelog
    生成changeLog文件

桌面端源码打包教程

1. 搭建项目源代码环境

依赖安装

  • 1、安装node环境及npm包管理工具;
  • 2、打开文件终端执行 => cnpm install;

2. 桌面端启动或者打包配置

  1. 项目根目录.electron-vue文件夹下config.json文件修改,如果没有这个文件需要自己手动创建
    {
    proxyServerUrl: "http://example.jepaas.com", // 本地调试 服务地址
    productName: 'JEPaaS云平台',  // 应用名称
    appId: `com.je.${project}`, // 应用ID
    name:'je-ele-jepaas', // package.json文件name 对应安装后应用在硬盘中的文件夹名称
    version: '1.0.0', // 版本
    }

3. 桌面端静态资源添加

  • 1、根目录下有project文件夹,里面可以放上平台前端资源文件,有助于资源本地化,提升性能
  • 2、根目录下.electron-vue/config/project/icons下的logo套图替换
    (UI制作一张1024*1024的png图片,.ico以及各种尺寸png图片文件(参考图片格式转换)、.icns(appstore 下载icns tool工具,需要收费6元,请斟酌))需要自己生成
  • 3、macOS系统下打包,根目录下需要修改certi_mac.p12文件,此文件是mac的代码签名认证,需要客户自己生成并替换,Windows无需处理!参考Mac打包签名

4. 编译桌面代码

  • 1、Windows系统 => npm run build
  • 1、macOS系统 => npm run mac
    编译成功后会在项目目录中生成build和dist文件夹 build下有对应系统的安装包,dist下是应用程序代码

如以上操作有问题,请及时联系支持人员!

最后编辑: 呼丽华  文档更新时间: 2024-07-05 09:35   作者:呼丽华