项目目录结构
│ .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. 桌面端启动或者打包配置
- 项目根目录.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-08-21 10:58 作者:呼丽华