alicesainta's 技术小站

2026-04-14 834 字 3 分钟

前端项目怎么做错误排查：从日志分层到快速定位的实战方法

一、为什么项目越大，越需要“可排查性” 很多前端同学写功能时只关注“能不能跑通”，但线上问题真正难的部分是：你不知道错误发生在什么环节你不知道用户当时做了什么你不知道请求参数和上下文状态所以前端工程化里有一个非常重要但常被忽略的目标：让问题“可复现、可追踪、可定位”。二、常见错误来源，不只是接口报错前端线上问题通常可以拆成 4 类：运行时错误：Cannot read properties of undefined 请求错误：超时、4xx/5xx、网关异常业务错误：字段缺失、状态流转错误、权限判断不一致资源错误：脚本加载失败、静态资源 404、版本缓存不一致如果

2026-04-11 597 字 3 分钟

前端怎么从 0 到 1 用 Docker：本地开发、部署与回滚实践

一、为什么前端也应该会 Docker 前端项目最常见的问题不是“代码不会写”，而是：本地能跑，测试环境跑不起来服务器缺依赖，发布临时补环境多项目 Node 版本冲突回滚需要重新打包，操作慢 Docker 的核心价值是把“应用 + 依赖 + 运行环境”打包成一个镜像，让你做到一次构建，到处运行。二、先记住这 3 个概念镜像（Image）：应用运行模板，包含代码和依赖容器（Container）：镜像启动后的运行实例仓库（Registry）：存储镜像的地方（如 Docker Hub、企业私库）三、前端项目最常见的 3 种容器化方式 1) SPA 静态站点（React

2026-04-06 1k 字 4 分钟

从需求开发场景看 Docker：前端部署为什么越来越离不开容器

一、在说 Docker 之前，先看常见需求开发场景先回答一个常见问题：前端项目是否一定需要安装 Node？结论是：开发阶段通常需要 Node（构建、依赖管理、脚手架）生产阶段是否需要 Node，要看部署形态是 SPA、SSR 还是 BFF 除了一个非常简单的 hello world HTML 页面外，现代前端开发基本都会依赖 Node 和 npm/pnpm/yarn 工具链。二、需求开发部署场景：到底要不要在服务器装 Node 1) 静态 SPA 单页面应用部署对于 Vue/React 的静态 SPA，打包后是 dist 静态资源。本地开发：需要 Node（可能还要用

2026-04-06 702 字 3 分钟

把应用和环境一起打包运行：为什么 Docker 能让交付更稳定

一、核心思路：应用 + 环境一起打包 Docker 最重要的价值，是把“应用程序”和“运行环境”打成一个整体。这样我们在本地跑、测试环境跑、线上跑，看到的效果可以保持一致。很多“我这里能跑、你那里跑不起来”的问题，本质上都是环境差异造成的。 Docker 的出现就是为了解决这个问题。二、为什么 Docker 在团队里这么常见下面这 7 点，是 Docker 在实际项目里最常见、最有感知的优势。 1. 保证运行环境一致镜像里已经固定了系统依赖、运行时版本和应用配置。同一个镜像，无论在哪台机器启动，运行结果都更可预期。 2. 不需要担心依赖安装和管理依赖已经被打进镜像里，使用

2026-04-05 2k 字 8 分钟

用 Harness Engineering 打造 agent-ready repo：从 Claude Code template 到可验证的 AI coding workflow

这篇文章想解决什么问题最近越来越多团队在做 AI 开发时会遇到一个共同问题：会用模型会写 prompt 也能让 agent 改代码但结果仍然不稳定。同样一个需求，今天跑得通，明天就偏；同一个仓库，不同人调用 agent 产出的质量差异非常大。这时候问题通常不在“模型不够强”，而在仓库还不是 agent-ready repo。这也是 Harness Engineering 要解决的核心：把代码仓库从“给人看”升级为“人和 agent 都能稳定执行”。一、从普通 ChatBox 到 AI Agent AI 从普通 chatBox 变成 AI Agent，本质上是从“只会对

2026-03-29 1k 字 4 分钟

Git 的“时空管理”：三个工作区域

Git 的核心心智模型理解 Git 不应该从命令（add/commit）开始，而应该从它的数据流向和存储原理开始。一、Git 的三个工作区域 Git 将代码的存在状态划分为三个主要的逻辑区域，你可以把它们看作是一个“三阶跳板”： 1. 工作区 (Working Directory) 你在电脑上能直接看到的、正在编辑的文件目录。状态：这是“活”的代码。操作：你在这里写 Bug、修 Bug、重构。 2. 暂存区 (Staging Area / Index) 一个中转站。当你执行 git add 时，改动会进入这里。作用：它记录了你下一次提交要包含的内容。价值：允许你精细化

2026-03-29 1.5k 字 6 分钟

前端 AI 面试高频追问：RAG、MCP、Git 与 Monorepo 一次讲清

这篇文章解决什么问题很多同学准备 AI 方向面试时，容易停在“概念背诵”。真正拉开差距的，通常是三层表达：你知道这个概念是什么你知道它在系统里放在哪你知道它在工程里会遇到什么坑、怎么解这篇就按这个结构，把常见追问一次串起来： RAG、Skills、Tools、MCP 到底怎么区分 git rebase 和 git merge 的区别是什么想把 3 次 commit 合成 1 次，应该用什么命令 git reset 和 git revert 的差异为什么要了解 Monorepo + pnpm 什么是幽灵依赖，怎么治理一、先把基础概念讲顺 1）RAG 是什么一句话

2026-03-16 5.5k 字 21 分钟

前端网络安全与 Vue：27 个高频问题

1）PC 端和移动端的自适应我会先把移动端视口设置正确，然后以流式布局为主、断点为辅。核心是让布局天然适配，而不是靠堆媒体查询。视口（移动端必写）： 1<meta name="viewport" content="width=device-width, initial-scale=1" /> 布局优先用 flex/grid + min/max-width，必要时再加断点（mobile-first）： 12345678.list { display: flex; flex-wrap: wrap; gap: 12px

2026-03-16 1.3k 字 5 分钟

前端如何和后端通信：API、HTTP 流程、JSON、GET/POST

我刚开始学前后端分离时，最经常冒出来的问题就是： “我知道前后端分离，但前端到底怎么跟后端说话？” 把这个问题拆开，其实就一条主线：前端（浏览器）发 HTTP 请求去调用后端的 API，常见的数据格式是 JSON。后端处理完，把结果再通过 HTTP 响应返回来，前端拿到结果更新 UI。先别被名词吓到：API 就是“后端给程序用的入口” API（Application Programming Interface）直译叫“应用程序编程接口”。但你不需要把它想得很玄。它最关键的点是：给程序调用，不是给用户点来点去。你看到的按钮、列表、表单是 UI；UI 背后那句 fetch('/api/x

2026-03-14 2k 字 8 分钟

Claude Code、OpenCode、Oh My OpenAgent、CC-Switch 简单上手

这篇文章写给谁如果你最近在折腾 AI 编程工具，大概率会同时看到这几个名字： Claude Code OpenCode Oh My OpenAgent CC-Switch 名字很多，但它们不是同一种东西。它们分别是干什么的最基础怎么安装最常用怎么启动新手应该怎么把它们串起来用一、先用一句话理解这四个工具先别急着装，先把定位分清楚。 1. Claude Code 是什么 Claude Code 是 Anthropic 官方推出的终端编程助手。你可以把它理解成：在终端里和 Claude 协作写代码能看当前仓库上下文适合做修改、重构、排查问题、补测试如果你本