大家好，我是爱好和平的大布布将军，谢谢光临，再见！！！
都知道我是一个打工仔，上面直接对接董事长，昨天上午接到董事长命令，收拾辎重，立刻马上从北京市朝阳区静安中心撤回石景山地区。。。。。。（我心里又哭又笑，心想，你玩我呢？我屁股都没坐热。。。）
然而，上周一，我们才刚搬到静安中心，过去之前，大家伙和他各种劝说，通勤时间啊、成本啊，和他说了个三四遍，没用。开着他那不知道几几年的老奥迪A4,带着颠沛流离的我、同事、办公用品毅然出发。
我们董事长幻想和那边的项目中心，谈场甜甜的恋爱，你中有我我中有你。
美其名曰：“借鸡下蛋”。。。
好一个借鸡下蛋，把我累够呛，这不，去了那边待了一周，就和人家闹分手。也就有了上面的战略撤退。
回归正题，昨天下午撤回石景山游击大队后，董事长韬光养晦地提出：一体两翼+海陆空游击队战略指南。
我是谁，我在哪里？
我是一名开发啊，大哥！！！！！
好吧，我承认，他又赢了，**再一次地让我怀疑这个公司，怀疑他。**大哥是真飘啊~~~
不过，这都是小场面啊，兄弟姐妹们，为了这点“我南非”，为了证明咱们的实力，我实施了以下开发计划：
基于 Electron + React 框架开发的桌面演示系统，展示公司的产品和服务
技术栈
- Electron - 桌面应用框架
- React 18 - UI框架
- React Router - 路由管理
- Webpack - 构建工具
- Babel - JavaScript编译器
功能特点
- 公司首页：展示产品主体信息
- 产品展示：AI获客、AIGEO
- 产品详情页：详细的产品介绍和操作演示
- React架构：组件化开发，易于维护和扩展
项目结构
desktopdemonstration/
├── public/
│ └── index.html # HTML模板
├── src/
│ ├── components/ # React组件
│ │ ├── Home.js # 首页组件
│ │ ├── Qianliyan.js # 千里眼AI获客组件
│ │ └── Shunfenger.js # 顺风耳AI获客组件
│ ├── App.js # 主应用组件（路由配置）
│ ├── index.js # 入口文件
│ └── styles.css # 全局样式
├── dist/ # 构建输出目录（自动生成）
├── main.js # Electron主进程
├── webpack.config.js # Webpack配置
├── .babelrc # Babel配置
├── package.json # 项目配置
└── README.md # 项目说明
package.json
"start": "npm run build && electron .",
"dev": "concurrently \"webpack --mode development --watch\" \"wait-on dist/index.html && electron . --dev\"",
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"pack": "npm run build && electron-builder --dir",
"dist": "npm run build && electron-builder",
"dist:win": "npm run build && electron-builder --win",
"dist:win32": "npm run build && electron-builder --win --ia32",
"dist:win64": "npm run build && electron-builder --win --x64"
},
打包发布
- NSIS安装程序：
release/xxx Setup x.x.x.exe（支持32位和64位） - 便携版：
release/xxx-x.x.x-portable.exe（64位）
安装程序特性
NSIS安装程序
- ✅ 支持自定义安装路径
- ✅ 自动创建桌面快捷方式
- ✅ 自动创建开始菜单快捷方式
- ✅ 支持卸载
- ✅ 支持32位和64位系统
便携版
- ✅ 免安装，直接运行
- ✅ 单文件可执行程序
- ✅ 适合临时使用或U盘携带
自定义配置
修改应用信息
编辑 package.json 中的以下字段：
{
"name": "xxx-demo",
"version": "1.0.0",
"description": "xxxxxx桌面演示系统",
"author": "xxxxxx"
}
添加应用图标
- 准备图标文件（ICO格式，建议256x256或512x512）
- 将图标文件命名为
icon.ico - 放置到
build/目录
如果没有图标文件，打包时会使用默认图标。
实际开发中碰到问题（主要问题）
1. 主要问题：React Router 配置
在 Electron 中使用 BrowserRouter 时，由于 file:// 协议的限制，路由无法正常工作。已改为 HashRouter：
2. 资源路径问题
已在 webpack 配置中添加 publicPath: './'，确保资源路径正确。
3.打包为Windows安装程序（NSIS）
遇到权限问题。在 Windows 上创建符号链接需要管理员权限。先调整配置，禁用代码签名并只生成 NSIS 安装程序。
- package.json中
"target": [
{
"target": "nsis",
"arch": [
"x64",
"ia32"
]
},
{
"target": "portable",
"arch": [
"x64"
]
}
],
"icon": "build/icon.ico",
"signingHashAlgorithms": [],
"signAndEditExecutable": false,
"signDlls": false
},
- 这是 Windows 权限问题（无法创建符号链接）。先清理缓存，并设置跳过代码签名。执行
Remove-Item -Path "$env:LOCALAPPDATA\electron-builder\Cache\winCodeSign" -Recurse -Force -ErrorAction SilentlyContinue
$env:SKIP_NOTARIZATION='true'; $env:CSC_IDENTITY_AUTO_DISCOVERY='false'; npm run dist:win64 -- --config.win.sign=null
-
npm run dist:win64 生成以下文件
安装程序（NSIS）
- 北京xxx Setup 1.0.0.exe — Windows 安装程序
- 支持 32 位和 64 位系统
- 包含安装向导
- 自动创建桌面和开始菜单快捷方式
- 可自定义安装路径
便携版
- 北京xxx-1.0.0-portable.exe — 便携版
- 64 位系统
- 免安装，直接运行
以上就是基于Electron + React框架开发桌面演示系统从搭建到打包的大致流程，用来对接海陆空游击队，实现一体两翼目标的重要组成部分。
感谢大家的观看，如果大家有人也碰到这种公司董事长，大家伙有什么好的想法，欢迎评论区交流~~~
