企业官网建设流程全解析

• 教程
• 人工智能
• 机器学习
• 深度学习

本指南围绕 AI-For-Beginners 课程仓库中的测验应用（Quiz App，位于 etc/quiz-app）展开，系统讲解其作为课程"课前/课后测验"（pre- and post-lecture quizzes）的运作方式、如何为其添加一门全新的语言翻译、本地开发构建的完整命令，以及如何借助 Azure Static Web Apps 与 GitHub Actions 一键发布上线。读完本文，你将掌握从"克隆测验项目 → 接入新语言 → 本地调试 → 云端部署"的完整闭环能力，并理解测验数据、路由与国际化机制的源码级实现细节。

一、测验应用在课程中的角色

AI-For-Beginners 是面向初学者的 12 周、24 课 AI 课程。每一课都配有课前测验（Pre-Quiz）与课后测验（Post-Quiz），用于帮助学习者检验学习效果。这些测验由一个独立的 Vue 2 应用承载，即etc/quiz-app目录：

• 前端框架：Vue 2（vue@^2.6.11），路由使用vue-router@^3.4.9，国际化使用vue-i18n@^8.28.2，见 package.json；
• 测验数据以 JSON 形式集中存放于src/assets/translations/，其中en目录为所有语言的"标准源"（canonical）；
• 应用通过vue-cli-service提供serve/build/lint三条核心命令（见 package.json）。

全课程共有40 个测验，编号从 0 开始。测验按课程分组存放在lesson-1.json至lesson-24.json中，每个文件内的quizzes数组通常同时包含该课的课前与课后测验。以 lesson-1.json 为例：其中包含id: 101的 "Introduction to AI: Pre Quiz" 与id: 201的 "Introduction to AI: Post-Quiz"，每个测验固定 3 道选择题，每题含questionText与带isCorrect标记的answerOptions。

二、添加一门新的语言翻译（核心扩展流程）

官方文档明确给出了接入新语言的四步流程，下面结合仓库源码逐条展开。

1. 在assets/translations下创建对应语言目录

在 src/assets/translations 下以语言代码命名新建目录（如fr、cs），在其中放置与en目录结构一致的lesson-N.json文件，并确保lesson-N.json的编号与课程编号严格对齐（全课程 40 个测验，编号从 0 开始）。翻译时以en目录内容为基准逐文件对照，保持 JSON 结构、id、isCorrect判定逻辑完全不变，仅翻译title、questionText、answerText、complete、error等文案字段。

2. 在语言目录内维护index.js汇总导入

参照 en/index.js 的写法，在你的语言目录中新建index.js，逐行import所有lesson-N.json，并按{ 0 : x1[0], 1 : x2[0], ... 23 : x24[0] }的映射关系导出，使测验编号（0～23）与课程文件一一对应。

3. 在顶层index.js注册新语言

编辑 translations/index.js，将新语言的汇总模块引入并挂入messages对象，例如当前仓库已经同时挂载了en与es两种语言：

import englishQuizzes from './en'; import spanishQuizzes from './es'; const messages = { en: englishQuizzes, es: spanishQuizzes, }; export default messages;

新增语言时，在import与messages中分别补上对应条目即可。

4. 在App.vue的下拉菜单中加入语言项

编辑 App.vue，在<select v-model="locale">中追加<option>，其值必须与语言目录的文件夹名完全一致：

<select v-model="locale"> <option>en</option> <option>es</option> <!-- 新增：<option>fr</option> --> </select>

从源码可以看出语言选择的完整链路：App.vue的created()钩子优先读取路由查询参数?loc=作为初始 locale，缺省时回退为en（App.vue）；用户切换下拉框时，watch.locale会同步写入this.$root.$i18n.locale（App.vue），而 Quiz.vue 则通过currLocale计算属性读取该值渲染对应语言数据。因此只要messages中注册了该语言，下拉框选择即可生效。

5. 在翻译后的课程文档中接入语言参数

最后，如果被翻译的课程 Markdown 文档里存在指向测验的链接，需要为这些链接追加?loc=查询参数，例如法语版本应形如?loc=fr。这样学习者从课程页进入测验时，应用即可直接以对应语言呈现题目。

三、本地开发：安装、调试与构建

测验应用基于 Vue CLI 5，环境要求为 Node.js 与 npm。常用命令如下（见 README 与 package.json）：

# 安装全部依赖 npm install # 开发模式：编译并热重载（Hot-Reload） npm run serve # 生产模式：编译并压缩 npm run build # 代码检查与自动修复 npm run lint

• npm run serve启动开发服务器，修改源码后页面自动刷新，适合本地验证新增语言是否生效；
• npm run build将产物输出到dist目录，这是后续 Azure 部署中output_location对应的目录；
• npm run lint基于eslint+eslint-plugin-vue对src进行语法与风格校验（见 package.json）。

路由与页面结构

应用路由由 src/router/index.js 定义，共三条：

测验页面的交互逻辑集中在 Quiz.vue 中：点击选项后调用handleAnswerClick(option.isCorrect)，答对则进入下一题（每题固定 3 道，见源码注释 "always 3 questions per quiz"），答完显示complete文案；答错则显示error文案并可重新作答。

四、部署到 Azure Static Web Apps（分步指南）

官方 README 提供了一套完整的 Azure 静态站点部署路径，以下按步骤整理（其中涉及的 Azure 控制台操作以官方文档为准，本仓库不包含 Azure 凭据或配置）。

第 1 步：Fork 仓库

确保静态 Web 应用代码位于你自己的 GitHub 仓库中：先 fork 本仓库（或包含测验应用代码的仓库），后续 Azure 将基于该仓库执行构建与发布。

第 2 步：创建 Azure Static Web App 资源

1. 注册/登录 Azure 账户；
2. 进入 Azure 门户；
3. 点击"创建资源"，搜索Static Web App；
4. 点击"创建"进入配置向导。

第 3 步：配置 Static Web App

基础信息（Basics）：

部署详细信息（Deployment Details）：

• 来源（Source）：选择GitHub；
• GitHub 账户：授权 Azure 访问你的 GitHub 账户；
• 组织（Organization）：选择包含代码的组织；
• 仓库（Repository）：选择包含静态 Web 应用代码的仓库；
• 分支（Branch）：选择要部署的分支（通常为main）。

构建详细信息（Build Details）：

• 构建预设（Build Presets）：选择应用使用的框架，本项目为Vue；
• 应用位置（App Location）：应用源码所在目录，本仓库中测验应用位于etc/quiz-app，故填写etc/quiz-app；
• API 位置（API Location）：若存在 API 则填写其目录（本项目可选/留空）；
• 输出位置（Output Location）：构建产物目录，npm run build的输出为dist。

第 4 步：检查并创建

核对配置后点击"创建"。Azure 会自动完成两件事：创建所需的云端资源，并在你的 GitHub 仓库中生成 GitHub Actions workflow 文件（路径形如.github/workflows/azure-static-web-apps-<name>.yml）。

第 5 步：了解自动生成的 Workflow

该 workflow 负责完整的"构建 + 部署"流程。仓库文档给出了一个典型的示例文件（下节详述），其核心是调用Azure/static-web-apps-deploy@v1动作完成上传。

第 6 步：监控部署

进入 GitHub 仓库的Actions标签页，可以看到 workflow 正在运行：它将构建测验应用并部署到 Azure Static Web Apps。workflow 成功完成后，应用即通过 Azure 提供的 URL 对外提供服务。

五、示例 GitHub Actions Workflow 文件详解

README 提供了部署用 workflow 的示例，以下是整理为合法 YAML 后的版本（原文档中api_location一行存在引号配对笔误，此处已修正，其余参数与语义保持原样）：

name: Azure Static Web Apps CI/CD on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main jobs: build_and_deploy_job: runs-on: ubuntu-latest name: Build and Deploy Job steps: - uses: actions/checkout@v2 - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deploy@v1 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} repo_token: ${{ secrets.GITHUB_TOKEN }} action: "upload" app_location: "etc/quiz-app" # 应用源码路径 api_location: "" # API 源码路径（可选） output_location: "dist" # 构建产物目录（可选）

关键参数说明：

触发器设计上，push到main触发生产部署；pull_request（opened/synchronize/reopened/closed）触发预发布环境构建，方便在合并前预览测验应用的效果。

六、源码结构速览与后续拓展建议

测验数据组织方式

从源码可以进一步确认的事实

• 测验编号规则与课程存在对应关系：如lesson-1.json中的101（课前）与201（课后），从命名看百位对应课程编号、末两位区分课前/课后（见 lesson-1.json 与 lesson-1.json），接入新语言时务必保持这些id不变，否则/quiz/:id路由将无法命中；
• 语言切换完全由vue-i18n的全局 locale 驱动，与路由参数解耦后又通过?loc=查询参数完成"课程页 → 测验页"的语言传递；
• 答题器实现为"每题必答对才能前进"的强校验模式，答错即显示错误提示，属于教学场景的刻意设计。

常见排查建议

• 新增语言后下拉框出现但切换无效：检查顶层 translations/index.js 是否已注册该语言；
• 测验加载为空：核对语言目录内lesson-N.json的编号是否与课程一一对应，且index.js的键映射（0～23）与en目录一致；
• Azure 部署后页面 404：确认控制台中的App Location与 workflow 中的app_location均指向etc/quiz-app，且output_location为dist；
• 构建失败：先在本地完整执行npm install && npm run build，确保dist可正常产出后再检查 workflow 配置。

七、结语

本文以etc/quiz-app测验应用为主体，完整覆盖了"多语言扩展四步流程、本地开发构建命令、Azure Static Web Apps 六步部署"三大主线，并结合 App.vue、Quiz.vue、translations 等源码文件还原了语言切换、路由匹配与答题校验的底层实现。无论你是想为课程新增一门语言的测验、在本地二次开发测验样式，还是希望将测验应用快速部署上线，都可以直接套用本指南的操作路径。

• 教程
• 人工智能
• 机器学习
• 深度学习