# 前端工程化配置Skill

> 前端构建、路由、状态管理、环境变量的工程化配置规范。当需要搭建或规范前端工程(构建工具、路由、状态管理、多环境配置)时使用。

- Skill: `sky-cube/skill-78` (Agent Skill)
- Install (CLI): `npx skillmds@latest add sky-cube/skill-78`
- Raw SKILL.md: https://api.skillmd.com/api/skills/sky-cube/skill-78/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Sky-Cube (https://skillmd.com/u/sky-cube)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/sky-cube/skill-78

---

# 前端工程化配置Skill

## 适用场景
搭建前端工程或规范现有工程:构建工具、目录结构、路由、状态管理、请求封装、多环境变量与代码质量配置。

## 执行步骤
1. 构建选型:Vite(新项目默认)或 Webpack(存量兼容),统一脚本命令;输出目录、静态资源路径按部署环境配置。
2. 目录结构:src 下按 api/components/router/store/views/utils/assets 分层,页面与组件职责分离。
3. 路由配置:统一路由表,页面级懒加载;登录/权限守卫统一拦截,未授权跳转;404 与错误页兜底。
4. 状态管理:Pinia/Redux Toolkit 等主流方案;仅全局共享状态入 store,页面私有状态留在组件内,禁止把 store 当仓库。
5. 环境变量:.env.development/.env.production 分环境配置;Vite 下自定义变量需前缀(如 VITE_);密钥类禁止写入前端构建产物,敏感逻辑放后端。
6. 请求封装:统一封装拦截器——注入 token、统一错误码处理、loading、超时、重试白名单;接口定义集中管理。
7. 代码质量:ESLint + Prettier 统一规则提交,TypeScript strict 模式,提交前 lint 检查;依赖锁定版本。

## 规范要点
- 环境差异全部走环境变量/配置文件,禁止在代码里写死环境分支。
- 前端不存放任何密钥(即使混淆),敏感操作一律由后端接口完成。
- store 保持最小化:只放跨组件共享状态与必要缓存,避免全局状态滥用。
- 请求层必须统一错误提示与 token 失效跳转登录逻辑,禁止各页面重复处理。
- 路由守卫覆盖:未登录、无权限、页面不存在三类分支缺一不可。
- 构建产物应可区分环境与版本(环境变量注入版本号/构建时间)。

## 输出模板
```
## 前端工程化配置方案
构建与目录:工具选型 + 目录结构树
路由表:路径/组件/权限要求/是否懒加载
store 模块清单:模块/状态/职责说明
环境变量清单:变量名/用途/各环境取值(密钥不落前端)
请求封装说明:拦截器职责 + 错误码处理规则
```

## 自检清单
- [ ] 多环境配置分离,无硬编码环境分支
- [ ] 前端无密钥,敏感逻辑在后端
- [ ] 路由懒加载与三类守卫齐全
- [ ] store 最小化,请求错误统一处理
- [ ] ESLint/TS strict 落地,依赖锁版本