1. 为什么我不建议你手敲 Echo English AI 的前端骨架做 AI 英语陪练这类移动端项目最容易卡住的地方不是某个组件写不出来而是工程底座没搭好就开始写页面。我见过太多人一上来就在App.vue里堆首页、学习室、单词卡写到第三个页面时路由、布局、Mock 数据全缠在一起改一个按钮要翻五个文件。Echo English AI 这个项目要覆盖首页、学习室、口语陪练、单词记忆、阅读训练、写作批改六个页面如果一开始不把 Vite 工程、路由表、移动端布局和 Mock 数据分层后面接真实 AI 接口时基本要推倒重来。这篇要解决的就是这个前置问题用 Codex 辅助把 Vite Vue3.5 TypeScript 工程从零初始化搭出移动端骨架、路由布局和 Mock 数据让后续每一篇教程都能在这个底座上继续加功能而不是每次重开一个 HTML 文件。适合谁看适合已经会一点 Vue 基础语法、但没独立搭过完整前端工程的人也适合想用 Codex 这类 AI 编码工具做真实项目、但不知道怎么给提示词的人。核心检索词先明确Codex 辅助搭建 Vite Vue TypeScript 前端工程重点是路由布局和 Mock 数据。整套流程走完你会得到一个能本地启动、六个页面能互相跳转、页面有模拟数据渲染的移动端项目。下面按真实操作顺序来每一步都给可复制的配置和命令。2. 用 Codex 前先把 TaoToken 接入配置好在让 Codex 帮你写代码之前得先保证它能稳定调用模型。我这边用的是 TaoToken 做统一接入官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 。它的作用是把模型调用统一到一个入口你不需要在多个平台之间来回切 KeyCodex、Cline、Claude Code 这些工具都能指向同一个 Base URL。先说清楚三件套这是后面所有配置的基础Base URL 填https://taotoken.net/apiAPI Key 在控制台的 API Keys 页面生成Model ID 按你实际要用的模型填。这三样缺一个Codex 就会报 401 或者连接失败。如果你用的是 Claude Code 这类工具配置方式是在项目里建.claude/settings.json把 Base URL 和 Key 写进去。如果是 Codex 的auth.json路径通常在用户目录下的.codex/auth.json里面填 API Key 和 Base URL。Cline 的 MCP 配置则是在cline_mcp_settings.json里加服务条目。这三个文件的具体字段名不一样但核心都是 Base URL Key Model ID 三件套别只填 Key 忘了 Base URL那是最常见的 401 来源。拿 Key 的步骤不复杂进控制台找到 API Keys新建一个复制出来存好。注意 Key 只在创建时完整显示一次关掉页面就看不到了所以复制后先贴到你的配置文件里再关。模型对话入口在 https://taotoken.net/api 想先验证模型通不通可以直接在模型对话页面发一条测试消息确认返回正常再去配 Codex。这一步的篇幅我故意压短因为重点在后面的工程搭建。但你要记住Codex 能不能帮你写代码取决于这一步配没配对。配好之后Codex 的每一次代码生成、报错修复、重构建议都是通过这个入口走的。3. Vite Vue TypeScript 工程初始化与可复制配置这一节是全文技术重点给的都是能直接复制进项目的配置。先确认环境打开终端执行node -v和npm -vNode 建议 20 以上我这边是 v24.17.0npm 11.13.0没问题。创建项目用npm create vitelatest交互选择 Vue TypeScript。如果你在 PowerShell 里遇到「禁止运行脚本」的报错把npm换成npm.cmd就行这是执行策略限制不是 Vite 的问题。项目名建议用短路径比如C:\ai-projects\echo-english-ai路径里带、中文、空格在 Windows 下容易让 npm 脚本解析出错。创建完先改vite.config.ts这是整个工程的配置核心import { fileURLToPath, URL } from node:url import { defineConfig, loadEnv } from vite import vue from vitejs/plugin-vue export default defineConfig(({ mode }) { const env loadEnv(mode, process.cwd(), ) return { plugins: [vue()], resolve: { alias: { : fileURLToPath(new URL(./src, import.meta.url)), }, }, server: { host: 0.0.0.0, port: 8080, proxy: { /api: { target: env.VITE_API_BASE_URL || http://localhost:3000, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ), }, }, }, } })这里做了四件事指向src、端口固定 8080、允许局域网访问手机能连电脑调试、/api代理到环境变量里的后端地址。代理这块后面接真实 AI 接口时会用到现在先留着。接着让 TypeScript 也认识改tsconfig.app.json{ compilerOptions: { baseUrl: ., paths: { /*: [src/*] } } }只改 Vite 不改 tsconfig运行时能找到文件但编辑器会报Cannot find module /...两个都要配。环境变量文件建两个.env.development和.env.production# .env.development VITE_API_BASE_URLhttp://localhost:3000# .env.production VITE_API_BASE_URLhttps://api.echoenglish.example.com注意 Vite 里前端能读到的变量必须以VITE_开头写成API_BASE_URL是读不到的这个坑很多人踩。目录结构提前规划好别等页面多了再挪src/ ├─ api/ # 请求函数 ├─ assets/ # 图片、图标 ├─ components/ # 通用组件 │ ├─ common/ │ └─ layout/ ├─ data/ # Mock 数据 ├─ router/ # 路由配置 ├─ styles/ # 全局样式 ├─ types/ # TypeScript 类型 ├─ views/ # 页面组件 ├─ App.vue └─ main.ts路由表src/router/index.ts是六个页面的地图import { createRouter, createWebHistory, type RouteRecordRaw } from vue-router const routes: RouteRecordRaw[] [ { path: /, name: home, component: () import(/views/HomePage.vue) }, { path: /learning-room, name: learning-room, component: () import(/views/LearningRoomPage.vue) }, { path: /speaking-practice, name: speaking-practice, component: () import(/views/SpeakingPracticePage.vue) }, { path: /vocabulary, name: vocabulary, component: () import(/views/VocabularyPage.vue) }, { path: /reading-training, name: reading-training, component: () import(/views/ReadingTrainingPage.vue) }, { path: /writing-review, name: writing-review, component: () import(/views/WritingReviewPage.vue) }, ] export const router createRouter({ history: createWebHistory(), routes, scrollBehavior() { return { top: 0 } }, })component用函数形式是懒加载访问到才加载对应页面首页首屏压力小。scrollBehavior让每次切页滚动条回顶部手机端体验差别很大。Mock 数据放src/data/mock.ts类型定义放src/types/app.ts。类型先定好Mock 才有约束// src/types/app.ts import type { Component } from vue export type PageKey | home | learning-room | speaking-practice | vocabulary | reading-training | writing-review | profile export type RouteEntry { key: PageKey title: string path: string description: string icon: Component } export type ChatMessage { id: number role: ai | user content: string translation?: string }Mock 数据里路由导航项和聊天消息// src/data/mock.ts import { House, ChatDotRound, Headset, Files, Reading, EditPen } from element-plus/icons-vue import type { RouteEntry, ChatMessage } from /types/app export const routeEntries: RouteEntry[] [ { key: home, title: 首页, path: /, description: 学习概览, icon: House }, { key: learning-room, title: 学习室, path: /learning-room, description: AI 场景对话, icon: ChatDotRound }, { key: speaking-practice, title: 口语陪练, path: /speaking-practice, description: 发音与流利度, icon: Headset }, { key: vocabulary, title: 单词记忆, path: /vocabulary, description: 智能复习, icon: Files }, { key: reading-training, title: 阅读训练, path: /reading-training, description: 文章精读, icon: Reading }, { key: writing-review, title: 写作批改, path: /writing-review, description: AI 批改, icon: EditPen }, ] export const initialMessages: ChatMessage[] [ { id: 1, role: ai, content: Hi! Welcome to the restaurant. What would you like to order?, translation: 您好欢迎光临餐厅。您想点些什么 }, { id: 2, role: user, content: Id like a grilled chicken salad, please., translation: 请给我一份烤鸡肉沙拉。 }, ]main.ts把路由和 Element Plus 挂上import { createApp } from vue import ElementPlus from element-plus import element-plus/dist/index.css import /styles/main.scss import App from ./App.vue import { router } from /router createApp(App).use(router).use(ElementPlus).mount(#app)App.vue只放一个router-view /页面出口交给路由。移动端外壳用MobileLayout.vue包住每个页面顶部标题根据当前路由用computed算出来右侧抽屉菜单循环routeEntries生成导航项点击时router.push跳转。这样六个页面共享同一套手机壳视觉统一改一处全生效。4. 本地启动与页面跳转验证配置写完先装依赖再启动cd C:\ai-projects\echo-english-ai npm install npm run dev终端会输出本地地址因为vite.config.ts里固定了 8080所以直接访问http://localhost:8080/。如果 8080 被占用Vite 会自动换端口看终端实际输出为准。启动后按顺序验证六个路由http://localhost:8080/ 首页 http://localhost:8080/learning-room 学习室 http://localhost:8080/speaking-practice 口语陪练 http://localhost:8080/vocabulary 单词记忆 http://localhost:8080/reading-training 阅读训练 http://localhost:8080/writing-review 写作批改每个地址都能渲染出对应页面说明路由表配对了。再点右上角菜单抽屉里应该能看到六个导航项点「单词记忆」能跳到/vocabulary点「写作批改」能跳到/writing-review说明routeEntries和router.push联动正常。学习室页面验证交互切换场景后消息列表应该刷新成新场景的 AI 开场白在输入框输入英文句子发送列表会追加一条用户消息和一条模拟 AI 回复。这一步验证的是messages响应式数组的 push 是否触发视图更新。单词记忆页面验证点「熟悉/模糊/不认识」按钮对应计数加一卡片切到下一个单词到最后一个时弹出完成提示。阅读训练页面切换 Tab预览内容跟着变。写作批改输入内容点提交评分面板出现。最后跑一次构建这一步能暴露开发服务器不报但构建会报的问题npm run build构建通过说明 TypeScript 类型、路由导入、组件引用、样式编译都没问题。如果报错把完整错误贴给 Codex让它先分析原因再做最小修改别让它顺手重构无关文件。5. 常见报错排查401、local proxy failed、reading choices、OAuth这一节按真实会遇到的报错来对。401 UnauthorizedCodex 或模型调用返回 401九成是 Key 或 Base URL 没配对。检查三件套Base URL 是不是https://taotoken.net/apiKey 有没有复制完整创建后只显示一次Model ID 有没有填。如果用的是auth.json确认字段名没写错如果是 Claude Code 的settings.json确认 Base URL 和 Key 都在。改完重启工具别指望热加载。local proxy failed这个报错通常出现在代理配置或网络层。先看vite.config.ts里/api的target指向的地址是否可达env.VITE_API_BASE_URL有没有读到。如果后端没起代理转发自然失败。开发阶段可以先注释掉 proxy确认前端本身能跑再逐个排查后端地址。reading choices 相关报错这类报错多出现在模型返回结构解析时比如期望choices数组但拿到空对象。先确认请求体里的model字段和实际可用模型一致再确认返回是不是被中间层包了一层。打印完整响应体别只看错误信息。OAuth 报错如果工具走 OAuth 流程失败检查回调地址和客户端配置。多数情况下是本地端口被占或回调 URL 不匹配。换成 API Key 直连方式通常能绕过配置里把认证方式从 OAuth 切到 Key 即可。Cannot find module /...Vite 的 alias 和 tsconfig 的 paths 要同时配缺一个就报。检查vite.config.ts的resolve.alias和tsconfig.app.json的paths。npm run dev 找不到 vite路径里有或特殊字符换到短路径重新npm install。排查原则先看完整报错再定位是配置层、网络层还是代码层改完只验证相关部分别一次改一堆。6. 后续怎么在这个底座上继续加功能工程骨架搭完后面每一篇都能在这个底座上叠。首页精细化就改HomePage.vue和它的子组件学习室接真实聊天接口把sendMessage里的固定回复换成/api/chat请求口语陪练接录音和评分单词记忆加复习算法阅读训练接文本解析写作批改接 AI 批改接口。每个页面都是独立文件互不干扰。Codex 在这个流程里的角色是拆任务、生成骨架、按报错修复不是一次性生成整个网站。给它边界清晰的提示词比如「配置 别名、端口 8080、/api 代理到环境变量」比「帮我写个完整网站」有效得多。项目根目录放一份AGENTS.md写清技术栈和规范Codex 每次生成代码前会先读它省得你反复贴提示词。想先验证模型通不通去模型对话页面发条消息要长期做编码和 Agent 开发用 Coding Plan 更划算接入配置和文档在接入文档里能查到。地址统一走 https://taotoken.net/api Key 在控制台的 API Keys 页面生成。这套底座跑通后你手里就是一个能持续迭代的移动端 AI 英语学习站而不是一堆散落的 HTML 文件。