ML-For-Beginners 课程测验应用quiz-app开发调试与 Azure Static Web Apps 部署全指南【免费下载链接】ML-For-Beginners12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all项目地址: https://gitcode.com/GitHub_Trending/ml/ML-For-BeginnersML-For-Beginners 仓库内置了一个基于 Vue 的测验Quiz应用用于承载课程 26 课时的课前pre-lecture与课后post-lecture测验。本文以仓库中的 quiz-app 说明文档 及其希腊语译本 translations/el/quiz-app/README.md 为主体结合 quiz-app 目录下的真实源码完整讲解该应用的本地开发流程、SPA 路由原理以及将其发布到 Azure Static Web Apps 的逐步操作与 GitHub Actions 持续集成配置。读完后你将掌握从npm install到云端自动部署的完整实战链路并能直接套用到任何 Vue 静态应用的发布场景。一、项目定位嵌入 ML 课程的课前/课后测验测验应用是 ML-For-Beginners 课程体系的重要组成部分。根据 quiz-app/README.md 的说明这些测验是 ML 课程课程主页为 https://aka.ms/ml-beginners的课前与课后测验用于帮助学习者在开始新课前自测已有知识、在课程结束后验证学习成果。从源码结构看quiz-app 是一个标准的 Vue CLI 工程技术栈为Vue 3依赖声明于 quiz-app/package.jsonvue-router负责/首页与/quiz/:id具体测验页的路由分发vue-i18n负责多语言文案测验题目数据本身也以 i18n 资源文件的形式组织测验数据并非硬编码在组件中而是以 JSON 资源文件存放于 quiz-app/src/assets/translationsindex.js 统一聚合了 en、tr、fr、ja、it、ptbr、es 七种语言。每个 JSON 文件内以数组首元素en[0]导出结构包含title、complete、error文案与quizzes数组每个测验固定包含 3 道题每题有questionText与answerOptions每个选项带isCorrect标记。例如 en.json 中的题目即对应课程第 1 课Introduction to Machine Learning的课前测验。二、源码结构速览quiz-app/ ├── public/ │ ├── index.html # Vue 挂载点 #app 与 favicon │ └── routes.json # Azure Static Web Apps 的 SPA 回退路由配置 ├── src/ │ ├── assets/translations/# 多语言文案与全部测验题目数据JSON │ ├── components/Quiz.vue # 测验交互核心组件 │ ├── views/Home.vue # 测验列表首页 │ ├── views/NotFound.vue # 404 页 │ ├── router/index.js # 路由表与 history 模式配置 │ ├── App.vue # 根组件语言切换 布局 │ └── main.js # 应用入口i18n 初始化 ├── babel.config.js # Babel 预设 └── package.json # 依赖与 npm scripts几个关键实现点值得展开入口与国际化初始化。在 quiz-app/src/main.js 中应用通过Vue.use(VueI18n)注册国际化插件创建了locale: en、fallbackLocale: en的 i18n 实例再连同路由一起注入根组件并挂载到#app对应 public/index.html 中的挂载点。语言切换。根组件 quiz-app/src/App.vue 在导航栏渲染一个语言下拉框监听locale变化并写入this.$root.$i18n.locale同时支持通过 URL 查询参数?loc指定语言created()中读取this.$route.query.loc。这正是文档部署部分提到测验链接可带语言参数的原因。测验交互逻辑。核心组件 quiz-app/src/components/Quiz.vue 实现了完整的答题流程questions计算属性从$t(quizzes)读取题目handleAnswerClick(isCorrect)中答对且nextQuestion 3时进入下一题答完 3 题将complete置为true显示完成文案答错则置error提示重试——每次测验固定 3 题的规则就写在这段逻辑中。路由。quiz-app/src/router/index.js 采用history模式mode: history注册了首页、测验详情页与 404 兜底三条路由。history 模式对静态托管有一个关键影响刷新或直接访问/quiz/1这类深层路径时静态服务器必须把请求回退到index.html否则会 404——这一点直接决定了部署配置中路由规则的必要性。三、本地开发安装、热重载、构建与代码检查原文档在Ρύθμιση έργου项目设置一节给出了完整的 npm 命令下面逐一说明其作用与背后的实现。1. 安装依赖npm install在 quiz-app/package.json 中声明的核心依赖包括vue^3.5.12、vue-router^3.5.3、vue-i18n^8.26.7、core-js^3.6.5开发依赖为vue/cli-service、vue/cli-plugin-babel、vue/cli-plugin-eslint、eslint、eslint-plugin-vue等。注意该工程同时兼容 Vue 2 生态的 vue-router 3.x 与 vue-i18n 8.x APInew Vue(...)、Vue.use(...)写法运行时由 Vue 3 提供支持。2. 开发模式编译并热重载npm run serve该命令实际执行vue-cli-service serve见 package.json 的scripts段会启动本地开发服务器并监听文件变更热更新默认地址为http://localhost:8080。3. 生产构建压缩与最小化npm run build执行vue-cli-service build将源码打包为静态资源输出到dist目录——这个输出目录正是后文 Azure 部署配置中output_location的取值依据。Babel 转译由 quiz-app/babel.config.js 中的vue/cli-plugin-babel/preset提供。4. 代码检查与自动修复npm run lint执行vue-cli-service lintESLint 配置eslintConfig位于 package.json 内扩展了plugin:vue/essential与eslint:recommended。5. 自定义配置如需调整构建配置如输出目录、开发端口、代理等可参考 Vue CLI 官方 Configuration Referencevue-cli-service支持在vue.config.js中进行自定义本仓库当前未提供该文件采用默认配置。四、部署前置history 模式路由与静态托管回退由于路由使用history模式静态托管平台必须支持 SPA 回退。仓库内 quiz-app/public/routes.json 正是为此准备的 Azure Static Web Apps 路由配置{ routes: [ { route: /*, serve: /index.html } ] }它将所有路径请求回退到index.html确保用户直接访问/quiz/1或刷新页面时Vue Router 能接管路由并渲染对应测验。该文件会随public目录原样复制到构建产物中是部署成功与否的关键细节。五、部署到 Azure Static Web Apps逐步指南原文档核心章节Ανάπτυξη στο Azure部署到 Azure给出了从 GitHub 仓库到云端发布的完整流程共 6 个步骤。第 1 步准备 GitHub 仓库确保静态 Web 应用代码位于你的 GitHub 仓库中。对 ML-For-Beginners 而言测验应用位于仓库根目录下的quiz-app子目录因此仓库级部署需要将app_location指向/quiz-app。第 2 步创建 Azure Static Web App创建 Azure 账户并登录 Azure 门户点击 Create a resource搜索 Static Web App点击 Create 进入创建向导。第 3 步配置静态 Web 应用创建向导分为三组配置项原文档逐项列出整理如下基础信息Basics配置项说明Subscription选择你的 Azure 订阅Resource Group新建或选择已有资源组Name为静态 Web 应用命名Region选择离目标用户最近的区域部署详情Deployment Details配置项说明Source选择 GitHubGitHub Account授权 Azure 访问你的 GitHub 账户Organization选择 GitHub 组织Repository选择包含静态 Web 应用的仓库Branch选择要部署的分支如main构建详情Build Details配置项说明Build Presets选择应用所用框架本项目为 VueApp Location应用代码所在目录本项目为/quiz-app位于仓库子目录API Location若存在 API 则填写其位置可选本应用无后端Output Location构建产物目录Vue CLI 默认为dist第 4 步审阅并创建点击 Create 后Azure 会创建所需资源并在你的 GitHub 仓库中生成一个 GitHub Actions workflow 文件路径形如.github/workflows/azure-static-web-apps-name.yml负责后续的构建与部署。第 5 步GitHub Actions Workflow原文档提供了示例 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/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 # 构建产物目录可选各参数含义如下参数作用azure_static_web_apps_api_tokenAzure 侧生成的部署令牌存入仓库 Secrets创建 Static Web App 时由 Azure 自动注入repo_token使用内置的GITHUB_TOKEN完成仓库相关操作action取值upload表示构建并上传另有close用于关闭环境时清理app_location应用源代码位置仓库根目录为/本应用为/quiz-appapi_locationAzure Functions API 位置无后端时留空output_location构建输出目录对应 Vue CLI 的dist触发器设计为对main分支的push触发部署pull_request的打开、同步、重开、关闭事件也会触发以便在 PR 阶段预览构建结果、合并时正式发布。第 6 步监控部署打开 GitHub 仓库的 Actions 标签页可以看到 workflow 正在运行它会执行构建并将静态 Web 应用部署到 Azureworkflow 完成后应用即在 Azure 提供的 URL 上正式上线。六、部署到云端的常见检查清单结合前文源码分析部署失败时建议按以下顺序排查app_location是否正确本应用在仓库quiz-app子目录务必写/quiz-app而非/output_location是否与构建产物一致Vue CLI 默认输出dist需与npm run build的实际产物目录保持一致SPA 回退路由是否生效确认public/routes.json已被打包进dist否则深层路径刷新会 404Secrets 是否就绪AZURE_STATIC_WEB_APPS_API_TOKEN由创建 Static Web App 时自动注入 GitHub Secrets若手动重建需确认其存在本地先验证构建在quiz-app目录执行npm install npm run build确认dist正常产出后再触发云端构建可显著缩短排错周期。七、总结本文完整继承了 quiz-app/README.md及其希腊语译本的全部内容本地开发的四条 npm 命令、Vue CLI 配置入口、Azure Static Web Apps 创建向导的三大配置组以及 GitHub Actions 部署 workflow 的完整 YAML。同时结合 quiz-app 源码补充了技术纵深测验数据的 i18n JSON 结构、Quiz.vue的答题与 3 题完成逻辑、history 模式路由对静态托管的约束以及routes.json的 SPA 回退原理。无论是仅想本地跑起测验应用还是希望为课程贡献新的测验语言包、将应用发布到云端本文给出的命令与配置均可直接复制使用。部署完成后即可在 Azure 分配的 URL 上为学习者提供与课程 26 课时一一对应的课前、课后测验。【免费下载链接】ML-For-Beginners12 weeks, 26 lessons, 52 quizzes, classic Machine Learning for all项目地址: https://gitcode.com/GitHub_Trending/ml/ML-For-Beginners创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考