从零搭起一个现代化前端项目，到底要踩多少坑？

上周五晚上九点半，我还在工位上盯着 VSCode 里满屏的报错，心里默念：“这都什么年代了，前端怎么还这么难搞？”
作为一家传统制造企业数字化转型团队里的 Java 开发，我本以为自己这辈子只会和 Spring Boot、MyBatis、Oracle 打交道。结果去年公司搞“智能工厂”项目，领导拍板要上“AI+区块链+大屏可视化”，前端没人会，产品经理一拍我肩膀：“你不是会写代码吗？前端也差不多吧！”——于是，我被迫从后端“跨界”到前端，开始从零构建一个现代化前端项目。

今天这篇文章，不吹牛，不画饼，就聊聊我这半年来踩过的坑、熬过的夜、装过的插件（VSCode 里现在有 47 个前端相关插件，启动都要 5 秒），以及如何把 RAG、Gemini、甚至区块链这些听起来高大上的东西，真正落地到一个能跑起来的前端项目里。

---

为什么非得“现代化”？

我们公司以前的前端是什么样？jQuery + JSP + 后台拼 HTML，页面刷新像坐过山车，用户体验差到连我们内部测试都吐槽：“这界面是 2008 年穿越过来的吧？”

新项目要求支持实时数据看板、自然语言查询设备状态、甚至用 AI 自动生成巡检报告。产品经理甩过来一句话：“用户应该像用 ChatGPT 一样问‘昨天A车间良品率多少？’，系统就得答出来。”
这哪是前端需求？这分明是 RAG（Retrieval-Augmented Generation）+ 大模型的活儿！

但现实很骨感：我们没有专职前端，后端全是 Java 老兵，对 Vue/React 只停留在“听说过”的程度。更惨的是，项目 deadline 卡在双11前上线——没错，制造业也要蹭电商节搞营销活动。

于是，我决定：与其修修补补，不如推倒重来，直接上现代化技术栈。

---

技术选型：稳中求进，但不能太保守

虽然我喜欢折腾新技术（家里树莓派跑着 LLM 推理服务），但工作中我信奉一条铁律：生产环境只用经过验证的组合。

最终定下的架构：

• 前端框架：Vite + React 18（TSX 写法，类型安全保命）
• 状态管理：Zustand（轻量，比 Redux 简单太多）
• UI 库：Ant Design（团队熟悉，文档全，老板看了觉得“专业”）
• 构建工具：Vite（快！真的快！HMR 热更新秒级响应）
• AI 集成：调用 Google Gemini API + 自建 RAG 后端
• 区块链：Hyperledger Fabric（仅用于关键操作上链，比如质检报告签名）
• 后端：Spring Boot 3.x（咱的老本行，RESTful API + WebSocket）

为什么不用 Next.js？因为运维说“不想再维护 Node.js 服务”，我们后端全是 Java，干脆前后端分离，前端纯静态部署，后端用 Spring Boot 提供 API 和 WebSocket 通道。

---

第一步：脚手架别再 create-react-app 了！

create-react-app 已经被社区抛弃了好吗？Webpack 构建慢到怀疑人生，配置还锁死。我直接上 Vite：

npm create vite@latest smart-factory-frontend -- --template react-ts

三秒生成项目，开箱即用 TypeScript、ESLint、Prettier。我立马装上一堆插件：

• ESLint + Prettier：强制代码风格统一（不然同事提交的代码缩进乱七八糟）
• Path Intellisense：自动补全路径，再也不用 ../../../
• Error Lens：错误直接显示在行内，省得看底部 Problems 面板
• Live Server：虽然 Vite 自带 dev server，但偶尔需要模拟静态部署

---

关键挑战：如何让前端“理解”业务语义？

用户输入“上个月注塑机故障次数”，系统要能：

1. 识别意图（查询设备故障）
2. 解析时间范围（上个月）
3. 关联设备 ID（注塑机 → 设备编码）
4. 查询数据库
5. 用自然语言生成答案

这明显是 RAG 的典型场景。但 RAG 是后端的事，前端要做什么？

前端要做的是：提供流畅的对话交互 + 智能提示 + 结果可视化。

我设计了一个 AIChatBox 组件，核心逻辑如下：

// components/AIChatBox.tsx
import { useState } from 'react';
import { useGemini } from '../hooks/useGemini';

export const AIChatBox = () => {
  const [input, setInput] = useState('');
  const { isLoading, sendMessage } = useGemini();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!input.trim()) return;
    
    // 发送消息到后端 RAG 服务
    const response = await sendMessage(input);
    
    // 响应可能包含结构化数据（如图表配置）
    if (response.type === 'chart') {
      renderChart(response.data);
    }
    
    setInput('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="例如：昨天A车间良品率多少？"
        disabled={isLoading}
      />
      <button type="submit" disabled={isLoading}>
        {isLoading ? '思考中...' : '提问'}
      </button>
    </form>
  );
};

后端 Spring Boot 服务负责调用嵌入模型（我们用 BGE）做向量检索，再拼接上下文喂给 Gemini 1.5 Pro，最后返回结构化 JSON。前端根据 type 字段决定渲染文本、表格还是 ECharts 图表。

踩坑点：Gemini API 有速率限制，高峰期直接 429。解决方案：后端加 Redis 缓存常见问题，前端加 loading 状态 + 重试按钮。产品经理看到“思考中...”三个字，居然觉得“很有科技感”，算是意外收获。

---

区块链？前端怎么玩？

别误会，前端不直接操作区块链。但我们要让用户“看到”上链证据。

比如，当质检员提交一份报告，系统会：

1. 后端生成报告哈希
2. 调用 Fabric SDK 将哈希写入通道
3. 返回交易 ID 和区块高度

前端拿到后，展示一个“已上链”徽章，并提供“查看链上记录”按钮，点击后跳转到内部区块链浏览器（也是我们用 Spring Boot 写的）。

为了提升可信度，我还加了个小动画：徽章从灰色变成绿色，伴随轻微震动（CSS @keyframes 实现），用户反馈“感觉很真实”。

.badge.blockchain {
  animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 128, 0, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(0, 128, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 128, 0, 0); }
}

---

性能优化：别让用户等成化石

制造业用户很多还在用老旧 Chrome（IT 部门三年不升级），所以兼容性和性能是生死线。

我做了几件事：

1. 代码分割：按路由拆包，首屏加载 < 1.2s
2. 图片懒加载：设备图片用 loading="lazy"
3. WebSocket 保活：避免频繁重连（后端用 Spring Boot 的 @MessageMapping）
4. 防抖搜索：用户输入时，500ms 内不重复请求

还用 Chrome DevTools 的 Performance 面板抓了一次卡顿，发现是 Ant Design 的 Table 在渲染 1000 行数据时掉帧。换成虚拟滚动（react-virtual）后，FPS 从 20 飙到 60。

---

开发体验：工具链决定幸福感

每天通勤一小时，到公司就想高效 coding。我的 VSCode 配置救了我：

插件	作用
Thunder Client	替代 Postman，直接在 VSCode 里测 API
GitLens	查看谁在什么时候改了哪行代码（甩锅必备）
Bracket Pair Colorizer	彩色括号，JS 嵌套地狱里的一盏灯
Error Wat	把英文报错翻译成中文（虽然不准，但能猜）

另外，我写了几个 npm script 快捷命令：

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint src --ext ts,tsx --fix",
    "deploy": "npm run build && aws s3 sync dist s3://our-bucket"
  }
}

---

最终效果：老板笑了，用户不骂了

项目上线后，最让我骄傲的不是用了多少新技术，而是：

• 车间主任第一次用语音问“注塑机温度正常吗？”，系统答“当前温度 215℃，在正常范围（200-220℃）”，他愣了三秒，然后笑了。
• 运维说：“这次前端没崩过，奇迹！”
• 测试妹子终于不用手动刷新页面查数据了。

技术栈对比（上线前后）：

维度	旧系统	新系统
首屏加载	4.2s	1.1s
交互方式	表单+按钮	自然语言+图表
数据实时性	手动刷新	WebSocket 推送
可信度证明	无	区块链徽章
开发效率	2人周/功能	3天/功能

---

写在最后：传统企业的前端，也可以很酷

很多人觉得传统企业技术落后，但其实只要敢迈出第一步，现代化前端并不遥远。我们没用 Web3、没搞元宇宙，但 RAG + Gemini 让系统有了“理解力”，区块链给了用户“信任感”，而 Vite + React 让开发不再痛苦。

至于我？现在通勤路上还在想：要不要把 Gemmini 换成本地 Ollama + Llama 3？不过……等这个版本稳定再说吧，毕竟下个 deadline 是春节前。

（完）

作者：北京某制造企业 Java 开发，白天写 Spring Boot，晚上折腾前端，VSCode 插件比头发多。