企业官网建设流程全解析

ML-For-Beginners 课程测验应用 quiz-app：本地运行、工程结构与 Azure 静态 Web 应用部署全指南

【免费下载链接】ML-For-Beginners12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all项目地址: https://gitcode.com/GitHub_Trending/ml/ML-For-Beginners

本文围绕机器学习入门课程仓库 ML-For-Beginners 自带的课前/课后测验（quiz）应用 quiz-app 展开，完整讲解其在 quiz-app 目录下的本地启动、打包与代码结构，并以仓库官方 README 为依据，分步演示如何将该 Vue 单页测验应用部署到 Azure Static Web Apps 并接入 GitHub Actions 持续集成/持续部署（CI/CD）。读完本文，你将能独立克隆本项目跑起 52 道课程测验、读懂测验数据与判题逻辑，并复现「推送代码 → 自动构建 → 发布到 Azure」的完整上线链路。

一、quiz-app 在课程体系中的角色

ML-For-Beginners 是一套「12 周、26 课、52 个测验」的经典机器学习入门课程，每个测验分别对应每节课程开始前（pre-lecture）与结束后（post-lecture）的知识检测。这些测验的运行载体正是仓库根目录下的 quiz-app 子项目，其官方定位与运行说明见 quiz-app/README.md。

从仓库结构看，quiz-app 是一个基于Vue CLI 构建的单页应用（SPA），核心职责包括：

• 在首页聚合展示全部测验入口（按课程小节组织的 quiz 列表）；
• 依据路由/quiz/:id渲染对应的测验题目；
• 提供英文、法语、意大利语、日语、巴西葡萄牙语、土耳其语、西班牙语等多语言界面；
• 作为纯静态站点，被 Azure Static Web Apps 这类静态托管服务承载发布。

1.1 目录与关键文件速览

quiz-app 的可运行与可发布代码全部位于 quiz-app 目录内，核心构成如下：

注意：quiz-app 自身的说明文档（含部署步骤）即 quiz-app/README.md；本仓库还在 translations 目录维护了该文档的数十种语言翻译版本（如translations/ar/quiz-app/README.md），本文所述内容与之一致。

二、项目设置：从安装到本地热更新开发

quiz-app 是标准的 Node/npm 项目，本地运行只需要 Node.js 与 npm 环境。在仓库根目录下进入 quiz-app 子目录后，按顺序执行下述命令即可。

2.1 安装依赖

npm install

命令依据 quiz-app/package.json 中声明的依赖安装：运行时依赖包含vue、vue-router、vue-i18n与core-js；开发依赖则包括@vue/cli-service、@vue/cli-plugin-babel、@vue/cli-plugin-eslint、eslint、eslint-plugin-vue与vue-template-compiler。仓库已提交package-lock.json，安装时可获得确定性的依赖版本。

值得留意的是，从源码风格看（main.js 中new Vue({...})、Vue.use(VueI18n)，以及依赖中vue-router@^3、vue-i18n@^8、vue-template-compiler@^2），应用整体按 Vue 2.x 生态下的 Vue CLI（vue-cli-service版本 5）工程编写；而package.json中vue依赖字段为^3.5.12，与源码写法存在版本混合的痕迹，因此实际安装请以package-lock.json锁定的版本为准，切勿在未验证的情况下手动升级vue主版本。

2.2 开发模式：编译 + 热重载

npm run serve

该命令对应 package.json 中的"serve": "vue-cli-service serve"，会启动本地开发服务器，支持代码修改后的即时热重载（hot-reload）。官方文档称之为「Compiles and hot-reloads for development」，是日常调试界面与题目的主要方式。

2.3 生产构建：编译并压缩

npm run build

对应"build": "vue-cli-service build"。构建产物默认输出到dist/目录——这一点对后续 Azure 部署至关重要，因为 Azure 的output_location必须指向dist。同时，位于 quiz-app/public/routes.json 的回退规则文件会在构建时被原样复制进dist产物，为 history 路由模式提供刷新兜底：

{ "routes": [ { "route": "/*", "serve": "/index.html" } ] }

2.4 代码检查

npm run lint

对应"lint": "vue-cli-service lint"，依据 package.json 中的eslintConfig（继承plugin:vue/essential与eslint:recommended）对源码做静态检查与自动修复。

2.5 自定义配置

若需调整 webpack 编译行为（如修改dist输出目录、publicPath、代理等），可参考 Vue CLI 官方配置手册并新增vue.config.js；本文对应的应用未额外携带该文件，一切使用 Vue CLI 默认值。在根目录直接提供标题、文案与测验数据是通过语言资源文件完成的，见下文源码解读。

三、从源码看测验应用如何工作（实现级解析）

为了让部署前的冒烟测试更有的放矢，这里结合源码把应用的运行机制拆解清楚。

3.1 入口与全局装配

quiz-app/src/main.js 完成三件事：

1. 关闭生产环境提示（productionTip）；
2. 安装vue-i18n并创建以en为默认语言与回退语言的i18n实例；
3. 将i18n与router注入根实例并挂载到#app。

3.2 路由设计（history 模式）

quiz-app/src/router/index.js 定义了三条路由：

路由采用mode: 'history'，这也是为什么静态托管端必须配置「任意路径都回退到index.html」的回退规则（即前文 routes.json 的内容），否则用户直接刷新/quiz/3这类深链会返回 404。

3.3 测验数据格式与多语言机制

测验题目不是硬编码在组件里，而是存放在各语言的 JSON 语言包中，例如 quiz-app/src/assets/translations/en.json。每个 JSON 以数组包裹一个对象，包含以下层级：

• 顶层：title（页面标题）、complete（完成提示文案）、error（答错提示文案）、quizzes（测验数组）；
• 每个测验对象：id、title（如 "Introduction to Machine Learning: Pre-Lecture Quiz"）、quiz（题目数组）；
• 每道题：questionText（题干）、answerOptions（选项数组）；
• 每个选项：answerText（选项文本）、isCorrect（是否为正确答案，注意是字符串"true"/"false"）。

quiz-app/src/assets/translations/index.js 将en、tr、fr、ja、it、ptbr、es七份 JSON 的首元素注册为messages并统一导出。运行时，App.vue 顶部的语言下拉框通过监听locale变量，将this.$root.$i18n.locale切换到对应语言；Home.vue与Quiz.vue则通过this.$t("quizzes")取得当前语言下的测验列表——这正是同一套测验能被翻译成多语言的机制所在。

3.4 答题判定逻辑

quiz-app/src/components/Quiz.vue 用极简状态机实现测验交互：

• 初始状态：currentQuestion = 0、complete = false、error = false；
• 组件created时从路由参数取出/quiz/:id与查询串loc；
• 每题渲染题干与全部answerOptions按钮，点击触发handleAnswerClick(option.isCorrect)；
• 判定规则：只有isCorrect == "true"才放行；由于每套测验固定为 3 题（源码注释 "always 3 questions per quiz"），当currentQuestion + 1 < 3时前进到下一题，否则置complete = true显示恭喜文案；答错则置error = true提示重试。

这套结构意味着：如果课程团队要新增一节课的测验，只需向 JSON 语言包中的quizzes追加一个含id、title与 3 道题目的对象即可，无需改动任何 Vue 组件。

四、分步部署到 Azure Static Web Apps

quiz-app/README.md 的「Deploying to Azure」一节给出了从仓库到上线的完整六步法，本文按此脉络展开，并对每个 Azure 表单字段做细化说明。

第 1 步：把代码放进 GitHub 仓库并 Fork

确保静态站点代码已存在于你的 GitHub 仓库中。最直接的做法是先 fork 本仓库（测验应用源码位于 quiz-app 目录），或把 quiz-app 目录代码推送至你自己仓库的指定分支。

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

• 注册并登录 Azure；
• 在 Azure 门户中点击「创建资源」，搜索Static Web App；
• 点击「创建」，进入资源配置向导。

第 3 步：按向导配置资源

「基础知识（Basics）」选项卡：

「部署详细信息（Deployment Details）」：

• Source：选择GitHub；
• GitHub Account：授权 Azure 访问你的 GitHub 账号；
• Organization / Repository / Branch：分别选择组织、包含测验应用代码的仓库以及要发布的分支（如main）。

「构建详细信息（Build Details）」是关键一步，需要与 quiz-app 的实际工程参数一一对应：

第 4 步：Review 并创建资源

核对上述配置后点击「创建」。Azure 会一次性完成两件事：预置所需云资源，并在你的 GitHub 仓库自动生成一个 GitHub Actions 工作流文件（路径形如.github/workflows/azure-static-web-apps-<名称>.yml），同时自动写入用于授权的AZURE_STATIC_WEB_APPS_API_TOKEN仓库密钥。

第 5 步：理解自动生成的 GitHub Actions 工作流

该工作流接管了「代码推送 → 构建 → 发布」的整个流程，不需要再手动运行任何部署命令。以下是仓库文档中给出、并按可运行格式整理后的示例：

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: "/quiz-app" # 应用源码目录 api_location: "" # API 源码目录，可选，本例留空 output_location: "dist" # 构建产物目录，可选，默认随框架预设推断

对关键参数逐一说明：

• 触发器（on）：向main分支推送（push）即触发生产发布；pull_request的opened / synchronize / reopened / closed事件用于在 PR 场景下预构建预览站点（Azure 会在创建静态 Web App 时为你生成对应的预览 URL）。
• actions/checkout@v2：检出仓库代码到运行器。
• Azure/static-web-apps-deploy@v1：官方部署动作。其中azure_static_web_apps_api_token引用 Azure 自动写入仓库的部署令牌密钥，repo_token引用 GitHub 自动提供的GITHUB_TOKEN用于触发 PR 评论等操作。
• action: "upload"：表示执行构建并上传产物。完整的官方工作流通常会再定义一个action: "close"的作业，用于在 PR 关闭时清理对应预览环境——仓库文档示例仅保留核心的upload作业。
• app_location: "/quiz-app"与output_location: "dist"：必须与第 3 步的表单取值一致，Azure 会据此在工作目录中执行 Vue 项目的依赖安装与npm run build，再发布dist。

第 6 步：监控发布状态

• 回到你的 GitHub 仓库，打开Actions标签页；
• 应能看到build_and_deploy_job正在运行（首次运行需要几分钟安装依赖并构建）；
• 工作流成功结束后，测验应用即上线到 Azure 提供的 HTTPS URL（形式通常为https://<名称>.<随机后缀>.<区域>.azurestaticapps.net）。

由于仓库内联了 routes.json（/* → /index.html），发布后直接访问/quiz/<id>这类深链并刷新页面，也不会出现 404——这是 SPA history 路由在静态托管上的必需配置。

五、上线前本地验证与常见问题排查

在把代码交给 Azure 之前，建议先在本地完整复现一次生产构建链路：

npm install # 安装依赖 npm run serve # 本地交互冒烟：逐套测验点一遍，验证判题与多语言切换 npm run build # 生成 dist，检查 dist/ 内是否包含 index.html 与 routes.json

构建无误后再推送main分支触发 CI。常见问题与对策如下：

1. 工作流报错提示找不到应用源码：核对app_location是否填了/quiz-app（若错误填成/，Azure 会在仓库根目录找 package.json 而失败）。
2. 部署成功但刷新深链 404：确认dist中确实存在routes.json或已迁移为 Azure 新版约定staticwebapp.config.json（新版 Azure Static Web Apps 更推荐后者），两者都用于 history 路由回退。
3. 生产环境无题目/文案变英文：检查语言包 JSON 结构是否完整（顶层对象数组 +quizzes数组），且translations/index.js是否注册了对应语言；应用默认语言与回退语言均为en（见 main.js）。
4. 想增加测验：按 3.3 节的 JSON 结构向各语言包追加{ "id": 新ID, "title": "...", "quiz": [3 道题] }，每套固定 3 题以匹配Quiz.vue的完成判定。
5. Azure 表单/工作流字段与文档示例不完全一致：以你创建资源时 Azure 自动生成的工作流为准——不同版本门户生成的模板可能存在action: "close"清理作业或参数命名的细微差异。

六、结语

quiz-app 是 ML-For-Beginners 课程「一课一测」教学闭环的落地实现：多语言 JSON 承载 52 套测验数据，Vue 组件完成极简判题交互，history路由配合 routes.json 保证深链可用，而 Azure Static Web Apps 借助一条自动生成的 GitHub Actions 工作流把/quiz-app+dist的组合一键发布到全球 CDN。掌握了本文的本地命令、源码结构与六步部署法，你既可以为课程新增测验内容，也能把这套「Vue SPA + GitHub Actions + Azure SWA」模式迁移到自己的静态站点项目中去。

【免费下载链接】ML-For-Beginners12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all项目地址: https://gitcode.com/GitHub_Trending/ml/ML-For-Beginners