Sky-Cube 前端工程化配置Skill
适用场景
搭建前端工程或规范现有工程:构建工具、目录结构、路由、状态管理、请求封装、多环境变量与代码质量配置。
执行步骤
- 构建选型:Vite(新项目默认)或 Webpack(存量兼容),统一脚本命令;输出目录、静态资源路径按部署环境配置。
- 目录结构:src 下按 api/components/router/store/views/utils/assets 分层,页面与组件职责分离。
- 路由配置:统一路由表,页面级懒加载;登录/权限守卫统一拦截,未授权跳转;404 与错误页兜底。
- 状态管理:Pinia/Redux Toolkit 等主流方案;仅全局共享状态入 store,页面私有状态留在组件内,禁止把 store 当仓库。
- 环境变量:.env.development/.env.production 分环境配置;Vite 下自定义变量需前缀(如 VITE_);密钥类禁止写入前端构建产物,敏感逻辑放后端。
- 请求封装:统一封装拦截器——注入 token、统一错误码处理、loading、超时、重试白名单;接口定义集中管理。
- 代码质量:ESLint + Prettier 统一规则提交,TypeScript strict 模式,提交前 lint 检查;依赖锁定版本。
规范要点
- 环境差异全部走环境变量/配置文件,禁止在代码里写死环境分支。
- 前端不存放任何密钥(即使混淆),敏感操作一律由后端接口完成。
- store 保持最小化:只放跨组件共享状态与必要缓存,避免全局状态滥用。
- 请求层必须统一错误提示与 token 失效跳转登录逻辑,禁止各页面重复处理。
- 路由守卫覆盖:未登录、无权限、页面不存在三类分支缺一不可。
- 构建产物应可区分环境与版本(环境变量注入版本号/构建时间)。
输出模板
## 前端工程化配置方案
构建与目录:工具选型 + 目录结构树
路由表:路径/组件/权限要求/是否懒加载
store 模块清单:模块/状态/职责说明
环境变量清单:变量名/用途/各环境取值(密钥不落前端)
请求封装说明:拦截器职责 + 错误码处理规则
自检清单
- 多环境配置分离,无硬编码环境分支
- 前端无密钥,敏感逻辑在后端
- 路由懒加载与三类守卫齐全
- store 最小化,请求错误统一处理
- ESLint/TS strict 落地,依赖锁版本