拓冰网站定制 
教程人工智能机器学习深度学习【免费下载链接】AI-For-Beginners12 Weeks, 24 Lessons, AI for All!项目地址https://gitcode.com/GitHub_Trending/ai/AI-For-Beginners点击查看免费下载导读本文以 etc/quiz-app/README.md 为骨架系统讲解 AI-For-Beginners 课程内置的课前/课后测验应用Quiz App从题库 JSON 的数据结构与多语言翻译机制到本地开发环境的启动、构建与代码规范检查再到基于 GitHub Actions 将应用一键部署到 Azure Static Web App 的完整流程。阅读完本文你将掌握如何为这套 Vue 2 测验应用新增一种语言翻译、如何通过?loc查询参数在课程与测验之间联动语言以及如何把构建产物稳定地发布到云端。一、Quiz App 在课程中的定位AI-For-Beginners 是一套覆盖 12 周、24 节课的 AI 入门课程课程正文分布在 lessons 目录。为了让学习者在上课前评估已有知识、下课后检验学习效果仓库内置了一个独立的 Vue 测验应用etc/quiz-app负责渲染所有课节的课前Pre与课后Post测验。这个应用的关键特性包括纯前端单页应用基于 Vue 2 vue-router vue-i18n 构建题库以 JSON 文件形式随仓库托管无需后端数据库按课节组织的题库每个课节对应一个lesson-N.json文件内含该课的课前与课后两套测验多语言支持默认提供英语en题库并已附带西班牙语es翻译目录新增语言只需按固定约定添加文件部署友好构建产物为静态文件dist/可直接发布到 Azure Static Web App 等静态托管服务。二、项目结构与本地运行2.1 目录结构etc/quiz-app/ ├── public/ │ ├── index.html # SPA 入口 HTML │ ├── favicon.ico │ └── routes.json # Azure Static Web App 的路由回退配置 ├── src/ │ ├── assets/translations/ │ │ ├── en/ # 英语权威题库 │ │ │ ├── index.js # 汇总 lesson-1.json ~ lesson-24.json │ │ │ └── lesson-N.json │ │ ├── es/ # 西班牙语翻译题库 │ │ │ ├── index.js │ │ │ └── lesson-1.json │ │ └── index.js # 汇总各语言模块 │ ├── components/Quiz.vue # 测验交互组件 │ ├── router/index.js # 路由/ 与 /quiz/:id │ ├── views/Home.vue # 首页测验列表 │ ├── views/NotFound.vue │ ├── App.vue # 顶层布局 语言下拉框 │ └── main.js # 入口注册 vue-i18n 与 router ├── package.json # 依赖与 npm scripts └── babel.config.js2.2 环境准备与常用命令从 package.json 可以看到应用依赖vue^2.6.11、vue-router^3.4.9、vue-i18n^8.28.2构建工具为 Vue CLIvue/cli-service。在原文档中给出了四组核心命令完整整理如下# 安装依赖首次运行前执行 npm install # 开发模式编译并支持热重载 npm run serve # 生产构建编译并压缩产物输出到 dist/ npm run build # 代码规范检查并自动修复 npm run lint命令对应脚本说明npm run servevue-cli-service serve本地开发服务器支持文件变更后的热重载npm run buildvue-cli-service build生成生产环境静态文件默认输出到dist/目录npm run lintvue-cli-service lint基于 ESLint 检查并修复源码中的规范问题package.json中同时声明了 ESLint 配置继承plugin:vue/essential与eslint:recommended解析器使用babel-eslint这正是npm run lint的执行依据。三、题库数据格式详解题库的真实数据存储在 src/assets/translations/en/lesson-1.json 这类 JSON 文件中。以第 1 课为例其结构为[ { title: AI for Beginners: Quizzes, complete: Congratulations, you completed the quiz!, error: Sorry, try again, quizzes: [ { id: 101, title: Introduction to AI: Pre Quiz, quiz: [ { questionText: A famous 19th century proto-computer engineer was, answerOptions: [ { answerText: Charles Barkley, isCorrect: false }, { answerText: Charles Babbage, isCorrect: true }, { answerText: Charles Darwin, isCorrect: false } ] } ] }, { id: 201, title: Introduction to AI: Post-Quiz, quiz: [ ] } ] } ]关键字段含义字段层级含义title顶层测验应用的标题文案随语言变化complete顶层全部答对后的完成提示文案error顶层答错时的错误提示文案quizzes顶层该课节的测验数组通常包含一个 Pre Quiz 与一个 Post Quizid测验级测验唯一标识同时作为路由参数如/quiz/101title测验级测验标题如 Introduction to AI: Pre Quizquiz测验级题目数组每题含questionText题干与answerOptions选项数组answerText选项级选项文本isCorrect选项级布尔值标记该选项是否为正确答案从 src/components/Quiz.vue 的handleAnswerClick实现可以看出应用约定每个测验固定包含 3 道题答对且currentQuestion未到 2 时进入下一题答对最后一题则触发complete true显示完成提示一旦答错则设置error true停留在当前题必须答对才能继续。handleAnswerClick(isCorrect) { this.error false; let nextQuestion this.currentQuestion 1; if (isCorrect) { // always 3 questions per quiz if (nextQuestion 3) { this.currentQuestion nextQuestion; } else { this.complete true; } } else { this.error true; } }四、为测验添加一种新语言翻译核心操作原文档的“Adding a translated quiz set”一节给出了新增翻译的标准流程结合源码可以细化为以下五个步骤。第 1 步创建与en目录对齐的题库结构在 src/assets/translations 下新建目标语言的目录例如fr并按权威语言目录en的命名约定放置文件每个课节一个lesson-N.json同时提供一个index.js汇总文件。原文档强调“The canonical quizzes are inassets/translations/en”——即en是权威题库其他语言必须与其结构对齐包括文件数量与编号。第 2 步在新语言的index.js中导入所有翻译文件参照 src/assets/translations/en/index.js 的写法将本语言的各课节 JSON 全部导入并按下标组装成测验对象import x1 from ./lesson-1.json; import x2 from ./lesson-2.json; // ... 依此类推 const quiz { 0: x1[0], 1: x2[0], // 按下标映射到 0 ~ 23 }; export default quiz;从该文件可以看到目前en目录共引入lesson-1.json至lesson-24.json共 24 个课节文件每个文件取第 0 个元素分别映射到索引0至23对应原文档所说的“索引从 0 开始”。新增语言时需要保持同样的映射约定。第 3 步在语言汇总index.js中注册新语言编辑 src/assets/translations/index.js把新语言模块加入messages对象import englishQuizzes from ./en; import spanishQuizzes from ./es; import frenchQuizzes from ./fr; // 新增 const messages { en: englishQuizzes, es: spanishQuizzes, fr: frenchQuizzes, // 新增 }; export default messages;第 4 步在App.vue的语言下拉框中添加新语言编辑 src/App.vue在select v-modellocale中新增option选项文本必须与语言目录名完全一致select v-modellocale optionen/option optiones/option optionfr/option /select语言切换的联动逻辑同样位于 src/App.vue监听locale变化后写入this.$root.$i18n.localesrc/main.js 中的 vue-i18n 实例则负责将messages[locale]注入组件。同时src/App.vue 的created()钩子会优先读取 URL 中的?loc查询参数作为初始语言缺省回退到en——这与原文档“以查询参数控制语言”的说明完全对应。第 5 步更新课程正文中的测验链接在已翻译的课程文档中如 lessons/1-Intro/README.md凡指向测验的链接都需追加?loc语言缩写查询参数。例如链接到法语版测验时使用?locfr链接到西班牙语版时使用?loces。这样学习者从课程跳转到测验时应用会自动以该语言渲染题库无需手动切换。语言解析链路总结课程文档中的 ?locfr → App.vue created() 读取 $route.query.loc → $root.$i18n.locale fr → Quiz.vue 的 currLocale 计算属性读取该值 → messages[fr][0].quizzes 渲染对应语言的题目这条链路在 src/App.vue、src/components/Quiz.vue 与 src/views/Home.vue 三处均有对应实现且均实现了“无loc参数时默认en”的兜底逻辑。五、路由与测验交互机制src/router/index.js 定义了三条路由routes: [ { path: /, name: home, component: Home }, { path: /quiz/:id, name: Quiz, component: Quiz }, { path: /:pathMatch(.*)*, name: NotFound, component: NotFound } ]/首页由 src/views/Home.vue 渲染它遍历当前语言下所有课节的测验生成指向quiz/${quiz.id}的链接列表/quiz/:id测验页由 src/components/Quiz.vue 渲染通过:id定位到具体测验兜底路由未匹配路径时进入 404 页。Quiz 组件通过v-ifroute quiz.id过滤出当前测验用currentQuestion控制进度整体交互答对前进、答错提示、完成后显示complete文案正如第三节所述可在 src/components/Quiz.vue 中逐行验证。六、部署到 Azure Static Web App原文档的后半部分详细给出了部署到 Azure Static Web App 的逐步指南这里完整继承并结合仓库文件补充说明。6.1 部署前提由于部署以 GitHub 仓库为源码来源你需要将包含 Quiz App 源码的仓库 fork 到自己的 GitHub 账户即 fork AI-For-Beginners 仓库其中 etc/quiz-app 就是待部署的应用目录准备一个 Azure 账号若没有先创建 Azure 账户。6.2 创建 Azure Static Web App在 Azure portal 中执行点击“Create a resource”搜索并选择“Static Web App”点击“Create”进入创建向导。6.3 配置创建参数Basics基本信息配置项说明Subscription选择你的 Azure 订阅Resource Group新建或选择已有资源组Name为静态 Web 应用命名Region选择离目标用户最近的地域Deployment Details部署来源配置项说明Source选择GitHubGitHub Account授权 Azure 访问你的 GitHub 账户Organization选择你的 GitHub 组织Repository选择包含应用的仓库Branch选择要部署的分支例如mainBuild Details构建配置配置项说明Build Presets选择应用所用框架的预设本应用对应Vue.jsApp Location应用源码所在目录本仓库中填写etc/quiz-appAPI Location若存在 API 则填写其目录本应用为纯前端可留空Output Location构建产物目录填写dist6.4 审查并创建确认以上配置无误后点击“Create”。Azure 会自动在仓库中生成一个 GitHub Actions 工作流文件路径形如.github/workflows/azure-static-web-apps-name.yml负责后续的构建与发布流程。6.5 观察自动生成的 GitHub Actions 工作流创建完成后前往仓库的“Actions”标签页即可看到该工作流正在运行。它会在每次推送到指定分支或拉取请求时自动构建并部署工作流结束后应用即通过 Azure 提供的 URL 对外访问。原文档给出的工作流示例此处整理为标准 YAML 格式并修正了原文中的语法笔误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: etc/quiz-app api_location: output_location: dist各with参数与原文档及上述创建向导的配置一一对应参数值说明app_locationetc/quiz-app应用源码路径api_location空API 源码路径可选output_locationdist构建产物目录npm run build的输出位置6.6 路由回退配置部署的关键细节Quiz App 使用了 vue-router 的history模式见 src/router/index.js 中的mode: history这类 SPA 在静态托管下刷新非根路径时可能出现 404。仓库已经在 public/routes.json 中预置了路由回退规则{ routes: [ { route: /*, serve: /index.html } ] }该文件会随public/目录一并复制到构建产物中Azure Static Web App 会依据它把未匹配的路径回退到index.html从而保证/quiz/101?loces这类深链可被正常访问。部署时确认该文件随dist发布即可。七、多语言体系现状与扩展边界以仓库当前内容为准src/assets/translations 下存在两个语言目录en/权威题库含lesson-1.json~lesson-24.json共 24 个课节文件index.js将课节映射到索引 0 ~ 23es/西班牙语翻译目前仅提供lesson-1.json与对应的index.js可作为新增语言时的最小范例参考。需要留意的是原文档提到课程总计 40 道测验且编号从 0 开始而仓库当前en/index.js实际映射的课节索引为 0 ~ 2324 个课节文件、每个文件含 Pre/Post 两套测验。在新增翻译、对齐编号时应以 src/assets/translations/en/index.js 的现状为准避免索引错位。另外语言切换下拉框目前仅有en与es两个选项见 src/App.vue每新增一种语言都必须同步修改该下拉框这是新增翻译流程中容易被遗漏的一环。八、常见问题排查要点结合源码与原文档给出几个实践中易踩的坑下拉框没有出现新语言检查 src/assets/translations/index.js 是否已将新语言模块加入messages并检查 src/App.vue 的select是否新增了对应option?loc参数不生效确认 URL 查询参数名严格为locApp.vue与Quiz.vue均通过this.$route.query.loc读取且缩写与语言目录名完全一致若未带参数应用会回退到en测验点进去是空白确认路由参数:id与题库 JSON 中的测验id如101、201匹配Quiz 组件以route quiz.id为渲染条件部署后深链刷新 404确认output_location填写的构建目录与npm run build的实际输出一致本应用为dist且 public/routes.json 已随构建产物发布每套测验的题数Quiz 组件的完成判定硬编码为“3 题”见 src/components/Quiz.vue 中nextQuestion 3的判断新增题目时需保持每套 3 题的约定否则进度逻辑会出现偏差。结语Quiz App 虽然是一个体量精巧的 Vue 应用却完整覆盖了“多语言题库组织 → 语言参数联动 → 静态构建 → 云端自动部署”的典型链路。无论你是想为课程贡献新的语言翻译还是打算复用这套模式为自己的教学内容搭建测验系统都可以直接以 etc/quiz-app 为蓝本参照本文的五个翻译步骤与 Azure 部署流程快速落地。赞分享教程人工智能机器学习深度学习【免费下载链接】AI-For-Beginners12 Weeks, 24 Lessons, AI for All!项目地址https://gitcode.com/GitHub_Trending/ai/AI-For-Beginners点击查看免费下载相关推荐AI-For-Beginners 课程测验应用quiz-app实战指南多语言测验集维护与 Azure 静态 Web 应用部署AI For Beginners 课程测验应用quiz app实战指南多语言测验集维护与 Azure 静态 Web 应用部署 导读 本指南围绕 AI Fo教程人工智能机器学习深度学习Data-Science-For-Beginners 题库应用quiz-app多语言化与 Azure 静态部署实战指南Data Science For Beginners 题库应用quiz app多语言化与 Azure 静态部署实战指南 本篇文章以 Data Science数据科学教程读懂 pi-web 项目结构10 分钟跟完一条消息的主链路读懂 pi web 项目结构10 分钟跟完一条消息的主链路 pi web 是 pi 编码代理的浏览器界面。这篇 pi web 项目结构导读用一张目录地图加一条前端AI 应用开发工具上一篇pretty-ts-errors案例研究成功企业的实际应用案例下一篇cachix/devenv 开源项目安装与使用教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 AI-For-Beginners 课程测验系统：Quiz App 的多语言题库管理与 Azure 静态部署实战指南
教程人工智能机器学习深度学习【免费下载链接】AI-For-Beginners12 Weeks, 24 Lessons, AI for All!项目地址https://gitcode.com/GitHub_Trending/ai/AI-For-Beginners点击查看免费下载导读本文以 etc/quiz-app/README.md 为骨架系统讲解 AI-For-Beginners 课程内置的课前/课后测验应用Quiz App从题库 JSON 的数据结构与多语言翻译机制到本地开发环境的启动、构建与代码规范检查再到基于 GitHub Actions 将应用一键部署到 Azure Static Web App 的完整流程。阅读完本文你将掌握如何为这套 Vue 2 测验应用新增一种语言翻译、如何通过?loc查询参数在课程与测验之间联动语言以及如何把构建产物稳定地发布到云端。一、Quiz App 在课程中的定位AI-For-Beginners 是一套覆盖 12 周、24 节课的 AI 入门课程课程正文分布在 lessons 目录。为了让学习者在上课前评估已有知识、下课后检验学习效果仓库内置了一个独立的 Vue 测验应用etc/quiz-app负责渲染所有课节的课前Pre与课后Post测验。这个应用的关键特性包括纯前端单页应用基于 Vue 2 vue-router vue-i18n 构建题库以 JSON 文件形式随仓库托管无需后端数据库按课节组织的题库每个课节对应一个lesson-N.json文件内含该课的课前与课后两套测验多语言支持默认提供英语en题库并已附带西班牙语es翻译目录新增语言只需按固定约定添加文件部署友好构建产物为静态文件dist/可直接发布到 Azure Static Web App 等静态托管服务。二、项目结构与本地运行2.1 目录结构etc/quiz-app/ ├── public/ │ ├── index.html # SPA 入口 HTML │ ├── favicon.ico │ └── routes.json # Azure Static Web App 的路由回退配置 ├── src/ │ ├── assets/translations/ │ │ ├── en/ # 英语权威题库 │ │ │ ├── index.js # 汇总 lesson-1.json ~ lesson-24.json │ │ │ └── lesson-N.json │ │ ├── es/ # 西班牙语翻译题库 │ │ │ ├── index.js │ │ │ └── lesson-1.json │ │ └── index.js # 汇总各语言模块 │ ├── components/Quiz.vue # 测验交互组件 │ ├── router/index.js # 路由/ 与 /quiz/:id │ ├── views/Home.vue # 首页测验列表 │ ├── views/NotFound.vue │ ├── App.vue # 顶层布局 语言下拉框 │ └── main.js # 入口注册 vue-i18n 与 router ├── package.json # 依赖与 npm scripts └── babel.config.js2.2 环境准备与常用命令从 package.json 可以看到应用依赖vue^2.6.11、vue-router^3.4.9、vue-i18n^8.28.2构建工具为 Vue CLIvue/cli-service。在原文档中给出了四组核心命令完整整理如下# 安装依赖首次运行前执行 npm install # 开发模式编译并支持热重载 npm run serve # 生产构建编译并压缩产物输出到 dist/ npm run build # 代码规范检查并自动修复 npm run lint命令对应脚本说明npm run servevue-cli-service serve本地开发服务器支持文件变更后的热重载npm run buildvue-cli-service build生成生产环境静态文件默认输出到dist/目录npm run lintvue-cli-service lint基于 ESLint 检查并修复源码中的规范问题package.json中同时声明了 ESLint 配置继承plugin:vue/essential与eslint:recommended解析器使用babel-eslint这正是npm run lint的执行依据。三、题库数据格式详解题库的真实数据存储在 src/assets/translations/en/lesson-1.json 这类 JSON 文件中。以第 1 课为例其结构为[ { title: AI for Beginners: Quizzes, complete: Congratulations, you completed the quiz!, error: Sorry, try again, quizzes: [ { id: 101, title: Introduction to AI: Pre Quiz, quiz: [ { questionText: A famous 19th century proto-computer engineer was, answerOptions: [ { answerText: Charles Barkley, isCorrect: false }, { answerText: Charles Babbage, isCorrect: true }, { answerText: Charles Darwin, isCorrect: false } ] } ] }, { id: 201, title: Introduction to AI: Post-Quiz, quiz: [ ] } ] } ]关键字段含义字段层级含义title顶层测验应用的标题文案随语言变化complete顶层全部答对后的完成提示文案error顶层答错时的错误提示文案quizzes顶层该课节的测验数组通常包含一个 Pre Quiz 与一个 Post Quizid测验级测验唯一标识同时作为路由参数如/quiz/101title测验级测验标题如 Introduction to AI: Pre Quizquiz测验级题目数组每题含questionText题干与answerOptions选项数组answerText选项级选项文本isCorrect选项级布尔值标记该选项是否为正确答案从 src/components/Quiz.vue 的handleAnswerClick实现可以看出应用约定每个测验固定包含 3 道题答对且currentQuestion未到 2 时进入下一题答对最后一题则触发complete true显示完成提示一旦答错则设置error true停留在当前题必须答对才能继续。handleAnswerClick(isCorrect) { this.error false; let nextQuestion this.currentQuestion 1; if (isCorrect) { // always 3 questions per quiz if (nextQuestion 3) { this.currentQuestion nextQuestion; } else { this.complete true; } } else { this.error true; } }四、为测验添加一种新语言翻译核心操作原文档的“Adding a translated quiz set”一节给出了新增翻译的标准流程结合源码可以细化为以下五个步骤。第 1 步创建与en目录对齐的题库结构在 src/assets/translations 下新建目标语言的目录例如fr并按权威语言目录en的命名约定放置文件每个课节一个lesson-N.json同时提供一个index.js汇总文件。原文档强调“The canonical quizzes are inassets/translations/en”——即en是权威题库其他语言必须与其结构对齐包括文件数量与编号。第 2 步在新语言的index.js中导入所有翻译文件参照 src/assets/translations/en/index.js 的写法将本语言的各课节 JSON 全部导入并按下标组装成测验对象import x1 from ./lesson-1.json; import x2 from ./lesson-2.json; // ... 依此类推 const quiz { 0: x1[0], 1: x2[0], // 按下标映射到 0 ~ 23 }; export default quiz;从该文件可以看到目前en目录共引入lesson-1.json至lesson-24.json共 24 个课节文件每个文件取第 0 个元素分别映射到索引0至23对应原文档所说的“索引从 0 开始”。新增语言时需要保持同样的映射约定。第 3 步在语言汇总index.js中注册新语言编辑 src/assets/translations/index.js把新语言模块加入messages对象import englishQuizzes from ./en; import spanishQuizzes from ./es; import frenchQuizzes from ./fr; // 新增 const messages { en: englishQuizzes, es: spanishQuizzes, fr: frenchQuizzes, // 新增 }; export default messages;第 4 步在App.vue的语言下拉框中添加新语言编辑 src/App.vue在select v-modellocale中新增option选项文本必须与语言目录名完全一致select v-modellocale optionen/option optiones/option optionfr/option /select语言切换的联动逻辑同样位于 src/App.vue监听locale变化后写入this.$root.$i18n.localesrc/main.js 中的 vue-i18n 实例则负责将messages[locale]注入组件。同时src/App.vue 的created()钩子会优先读取 URL 中的?loc查询参数作为初始语言缺省回退到en——这与原文档“以查询参数控制语言”的说明完全对应。第 5 步更新课程正文中的测验链接在已翻译的课程文档中如 lessons/1-Intro/README.md凡指向测验的链接都需追加?loc语言缩写查询参数。例如链接到法语版测验时使用?locfr链接到西班牙语版时使用?loces。这样学习者从课程跳转到测验时应用会自动以该语言渲染题库无需手动切换。语言解析链路总结课程文档中的 ?locfr → App.vue created() 读取 $route.query.loc → $root.$i18n.locale fr → Quiz.vue 的 currLocale 计算属性读取该值 → messages[fr][0].quizzes 渲染对应语言的题目这条链路在 src/App.vue、src/components/Quiz.vue 与 src/views/Home.vue 三处均有对应实现且均实现了“无loc参数时默认en”的兜底逻辑。五、路由与测验交互机制src/router/index.js 定义了三条路由routes: [ { path: /, name: home, component: Home }, { path: /quiz/:id, name: Quiz, component: Quiz }, { path: /:pathMatch(.*)*, name: NotFound, component: NotFound } ]/首页由 src/views/Home.vue 渲染它遍历当前语言下所有课节的测验生成指向quiz/${quiz.id}的链接列表/quiz/:id测验页由 src/components/Quiz.vue 渲染通过:id定位到具体测验兜底路由未匹配路径时进入 404 页。Quiz 组件通过v-ifroute quiz.id过滤出当前测验用currentQuestion控制进度整体交互答对前进、答错提示、完成后显示complete文案正如第三节所述可在 src/components/Quiz.vue 中逐行验证。六、部署到 Azure Static Web App原文档的后半部分详细给出了部署到 Azure Static Web App 的逐步指南这里完整继承并结合仓库文件补充说明。6.1 部署前提由于部署以 GitHub 仓库为源码来源你需要将包含 Quiz App 源码的仓库 fork 到自己的 GitHub 账户即 fork AI-For-Beginners 仓库其中 etc/quiz-app 就是待部署的应用目录准备一个 Azure 账号若没有先创建 Azure 账户。6.2 创建 Azure Static Web App在 Azure portal 中执行点击“Create a resource”搜索并选择“Static Web App”点击“Create”进入创建向导。6.3 配置创建参数Basics基本信息配置项说明Subscription选择你的 Azure 订阅Resource Group新建或选择已有资源组Name为静态 Web 应用命名Region选择离目标用户最近的地域Deployment Details部署来源配置项说明Source选择GitHubGitHub Account授权 Azure 访问你的 GitHub 账户Organization选择你的 GitHub 组织Repository选择包含应用的仓库Branch选择要部署的分支例如mainBuild Details构建配置配置项说明Build Presets选择应用所用框架的预设本应用对应Vue.jsApp Location应用源码所在目录本仓库中填写etc/quiz-appAPI Location若存在 API 则填写其目录本应用为纯前端可留空Output Location构建产物目录填写dist6.4 审查并创建确认以上配置无误后点击“Create”。Azure 会自动在仓库中生成一个 GitHub Actions 工作流文件路径形如.github/workflows/azure-static-web-apps-name.yml负责后续的构建与发布流程。6.5 观察自动生成的 GitHub Actions 工作流创建完成后前往仓库的“Actions”标签页即可看到该工作流正在运行。它会在每次推送到指定分支或拉取请求时自动构建并部署工作流结束后应用即通过 Azure 提供的 URL 对外访问。原文档给出的工作流示例此处整理为标准 YAML 格式并修正了原文中的语法笔误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: etc/quiz-app api_location: output_location: dist各with参数与原文档及上述创建向导的配置一一对应参数值说明app_locationetc/quiz-app应用源码路径api_location空API 源码路径可选output_locationdist构建产物目录npm run build的输出位置6.6 路由回退配置部署的关键细节Quiz App 使用了 vue-router 的history模式见 src/router/index.js 中的mode: history这类 SPA 在静态托管下刷新非根路径时可能出现 404。仓库已经在 public/routes.json 中预置了路由回退规则{ routes: [ { route: /*, serve: /index.html } ] }该文件会随public/目录一并复制到构建产物中Azure Static Web App 会依据它把未匹配的路径回退到index.html从而保证/quiz/101?loces这类深链可被正常访问。部署时确认该文件随dist发布即可。七、多语言体系现状与扩展边界以仓库当前内容为准src/assets/translations 下存在两个语言目录en/权威题库含lesson-1.json~lesson-24.json共 24 个课节文件index.js将课节映射到索引 0 ~ 23es/西班牙语翻译目前仅提供lesson-1.json与对应的index.js可作为新增语言时的最小范例参考。需要留意的是原文档提到课程总计 40 道测验且编号从 0 开始而仓库当前en/index.js实际映射的课节索引为 0 ~ 2324 个课节文件、每个文件含 Pre/Post 两套测验。在新增翻译、对齐编号时应以 src/assets/translations/en/index.js 的现状为准避免索引错位。另外语言切换下拉框目前仅有en与es两个选项见 src/App.vue每新增一种语言都必须同步修改该下拉框这是新增翻译流程中容易被遗漏的一环。八、常见问题排查要点结合源码与原文档给出几个实践中易踩的坑下拉框没有出现新语言检查 src/assets/translations/index.js 是否已将新语言模块加入messages并检查 src/App.vue 的select是否新增了对应option?loc参数不生效确认 URL 查询参数名严格为locApp.vue与Quiz.vue均通过this.$route.query.loc读取且缩写与语言目录名完全一致若未带参数应用会回退到en测验点进去是空白确认路由参数:id与题库 JSON 中的测验id如101、201匹配Quiz 组件以route quiz.id为渲染条件部署后深链刷新 404确认output_location填写的构建目录与npm run build的实际输出一致本应用为dist且 public/routes.json 已随构建产物发布每套测验的题数Quiz 组件的完成判定硬编码为“3 题”见 src/components/Quiz.vue 中nextQuestion 3的判断新增题目时需保持每套 3 题的约定否则进度逻辑会出现偏差。结语Quiz App 虽然是一个体量精巧的 Vue 应用却完整覆盖了“多语言题库组织 → 语言参数联动 → 静态构建 → 云端自动部署”的典型链路。无论你是想为课程贡献新的语言翻译还是打算复用这套模式为自己的教学内容搭建测验系统都可以直接以 etc/quiz-app 为蓝本参照本文的五个翻译步骤与 Azure 部署流程快速落地。赞分享教程人工智能机器学习深度学习【免费下载链接】AI-For-Beginners12 Weeks, 24 Lessons, AI for All!项目地址https://gitcode.com/GitHub_Trending/ai/AI-For-Beginners点击查看免费下载相关推荐AI-For-Beginners 课程测验应用quiz-app实战指南多语言测验集维护与 Azure 静态 Web 应用部署AI For Beginners 课程测验应用quiz app实战指南多语言测验集维护与 Azure 静态 Web 应用部署 导读 本指南围绕 AI Fo教程人工智能机器学习深度学习Data-Science-For-Beginners 题库应用quiz-app多语言化与 Azure 静态部署实战指南Data Science For Beginners 题库应用quiz app多语言化与 Azure 静态部署实战指南 本篇文章以 Data Science数据科学教程读懂 pi-web 项目结构10 分钟跟完一条消息的主链路读懂 pi web 项目结构10 分钟跟完一条消息的主链路 pi web 是 pi 编码代理的浏览器界面。这篇 pi web 项目结构导读用一张目录地图加一条前端AI 应用开发工具上一篇pretty-ts-errors案例研究成功企业的实际应用案例下一篇cachix/devenv 开源项目安装与使用教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考