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/package.json项目元数据、npm 脚本、运行时依赖与构建工具链声明quiz-app/public/index.html页面 HTML 模板构建时作为应用外壳quiz-app/public/routes.jsonSPA 路由回退规则将任意路径统一指向index.html支撑 history 路由刷新不 404quiz-app/src/main.js应用入口装配 vue-i18n 与 vue-router 后挂载根组件quiz-app/src/App.vue根组件顶部导航、语言切换下拉框、全局标题quiz-app/src/router/index.js路由定义history 模式/、/quiz/:id、通配 404quiz-app/src/views/Home.vue首页循环渲染测验入口链接quiz-app/src/views/NotFound.vue未匹配路由的兜底页quiz-app/src/components/Quiz.vue测验组件出题、答题判定、完成/重试状态机quiz-app/src/assets/translations/index.js多语言资源聚合入口quiz-app/src/assets/translations/*.json各语言下的测验题目数据与界面文案含en.json等 7 份注意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 CLIvue-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 完成三件事关闭生产环境提示productionTip安装vue-i18n并创建以en为默认语言与回退语言的i18n实例将i18n与router注入根实例并挂载到#app。3.2 路由设计history 模式quiz-app/src/router/index.js 定义了三条路由路由名称组件说明/homeHome.vue测验列表首页/quiz/:idQuizQuiz.vue按 id 渲染指定测验/:pathMatch(.*)*NotFoundNotFound.vue通配兜底页路由采用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 Appsquiz-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」选项卡字段推荐取值订阅Subscription选择你拥有权限的 Azure 订阅资源组Resource Group新建或复用已有资源组名称Name为该静态 Web 应用命名区域Region选择离你最终用户最近的区域托管计划Hosting plan免费Free即可满足课程测验类轻量站点的演示与学习场景「部署详细信息Deployment Details」Source选择GitHubGitHub Account授权 Azure 访问你的 GitHub 账号Organization / Repository / Branch分别选择组织、包含测验应用代码的仓库以及要发布的分支如main。「构建详细信息Build Details」是关键一步需要与 quiz-app 的实际工程参数一一对应字段本文场景取值含义构建预设Build PresetsVue.js让 Azure 据此选择默认构建命令Vue CLI 项目执行npm run build应用位置App location/quiz-app应用源代码所在目录。由于测验应用位于仓库子目录而非根目录必须填/quiz-appAPI 位置API location留空本应用无后端函数若有 Azure Functions 才需要填写输出位置Output locationdistnpm run build的产物目录与 2.3 节说明一致第 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/checkoutv2 - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deployv1 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/checkoutv2检出仓库代码到运行器。Azure/static-web-apps-deployv1官方部署动作。其中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。常见问题与对策如下工作流报错提示找不到应用源码核对app_location是否填了/quiz-app若错误填成/Azure 会在仓库根目录找 package.json 而失败。部署成功但刷新深链 404确认dist中确实存在routes.json或已迁移为 Azure 新版约定staticwebapp.config.json新版 Azure Static Web Apps 更推荐后者两者都用于 history 路由回退。生产环境无题目/文案变英文检查语言包 JSON 结构是否完整顶层对象数组 quizzes数组且translations/index.js是否注册了对应语言应用默认语言与回退语言均为en见 main.js。想增加测验按 3.3 节的 JSON 结构向各语言包追加{ id: 新ID, title: ..., quiz: [3 道题] }每套固定 3 题以匹配Quiz.vue的完成判定。Azure 表单/工作流字段与文档示例不完全一致以你创建资源时 Azure 自动生成的工作流为准——不同版本门户生成的模板可能存在action: close清理作业或参数命名的细微差异。六、结语quiz-app 是 ML-For-Beginners 课程「一课一测」教学闭环的落地实现多语言 JSON 承载 52 套测验数据Vue 组件完成极简判题交互history路由配合 routes.json 保证深链可用而 Azure Static Web Apps 借助一条自动生成的 GitHub Actions 工作流把/quiz-appdist的组合一键发布到全球 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ML-For-Beginners 课程测验应用 quiz-app：本地运行、工程结构与 Azure 静态 Web 应用部署全指南
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/package.json项目元数据、npm 脚本、运行时依赖与构建工具链声明quiz-app/public/index.html页面 HTML 模板构建时作为应用外壳quiz-app/public/routes.jsonSPA 路由回退规则将任意路径统一指向index.html支撑 history 路由刷新不 404quiz-app/src/main.js应用入口装配 vue-i18n 与 vue-router 后挂载根组件quiz-app/src/App.vue根组件顶部导航、语言切换下拉框、全局标题quiz-app/src/router/index.js路由定义history 模式/、/quiz/:id、通配 404quiz-app/src/views/Home.vue首页循环渲染测验入口链接quiz-app/src/views/NotFound.vue未匹配路由的兜底页quiz-app/src/components/Quiz.vue测验组件出题、答题判定、完成/重试状态机quiz-app/src/assets/translations/index.js多语言资源聚合入口quiz-app/src/assets/translations/*.json各语言下的测验题目数据与界面文案含en.json等 7 份注意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 CLIvue-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 完成三件事关闭生产环境提示productionTip安装vue-i18n并创建以en为默认语言与回退语言的i18n实例将i18n与router注入根实例并挂载到#app。3.2 路由设计history 模式quiz-app/src/router/index.js 定义了三条路由路由名称组件说明/homeHome.vue测验列表首页/quiz/:idQuizQuiz.vue按 id 渲染指定测验/:pathMatch(.*)*NotFoundNotFound.vue通配兜底页路由采用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 Appsquiz-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」选项卡字段推荐取值订阅Subscription选择你拥有权限的 Azure 订阅资源组Resource Group新建或复用已有资源组名称Name为该静态 Web 应用命名区域Region选择离你最终用户最近的区域托管计划Hosting plan免费Free即可满足课程测验类轻量站点的演示与学习场景「部署详细信息Deployment Details」Source选择GitHubGitHub Account授权 Azure 访问你的 GitHub 账号Organization / Repository / Branch分别选择组织、包含测验应用代码的仓库以及要发布的分支如main。「构建详细信息Build Details」是关键一步需要与 quiz-app 的实际工程参数一一对应字段本文场景取值含义构建预设Build PresetsVue.js让 Azure 据此选择默认构建命令Vue CLI 项目执行npm run build应用位置App location/quiz-app应用源代码所在目录。由于测验应用位于仓库子目录而非根目录必须填/quiz-appAPI 位置API location留空本应用无后端函数若有 Azure Functions 才需要填写输出位置Output locationdistnpm run build的产物目录与 2.3 节说明一致第 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/checkoutv2 - name: Build And Deploy id: builddeploy uses: Azure/static-web-apps-deployv1 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/checkoutv2检出仓库代码到运行器。Azure/static-web-apps-deployv1官方部署动作。其中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。常见问题与对策如下工作流报错提示找不到应用源码核对app_location是否填了/quiz-app若错误填成/Azure 会在仓库根目录找 package.json 而失败。部署成功但刷新深链 404确认dist中确实存在routes.json或已迁移为 Azure 新版约定staticwebapp.config.json新版 Azure Static Web Apps 更推荐后者两者都用于 history 路由回退。生产环境无题目/文案变英文检查语言包 JSON 结构是否完整顶层对象数组 quizzes数组且translations/index.js是否注册了对应语言应用默认语言与回退语言均为en见 main.js。想增加测验按 3.3 节的 JSON 结构向各语言包追加{ id: 新ID, title: ..., quiz: [3 道题] }每套固定 3 题以匹配Quiz.vue的完成判定。Azure 表单/工作流字段与文档示例不完全一致以你创建资源时 Azure 自动生成的工作流为准——不同版本门户生成的模板可能存在action: close清理作业或参数命名的细微差异。六、结语quiz-app 是 ML-For-Beginners 课程「一课一测」教学闭环的落地实现多语言 JSON 承载 52 套测验数据Vue 组件完成极简判题交互history路由配合 routes.json 保证深链可用而 Azure Static Web Apps 借助一条自动生成的 GitHub Actions 工作流把/quiz-appdist的组合一键发布到全球 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考