vue-i18n在leetcode_problem_rating中实现中英双语切换：Vue 3项目国际化落地完整教程

vue-i18n在leetcode_problem_rating中实现中英双语切换Vue 3项目国际化落地完整教程【免费下载链接】leetcode_problem_ratingSelf-calculated rating of problems in leetcode weekly/biweekly contests.项目地址: https://gitcode.com/gh_mirrors/le/leetcode_problem_rating本文以开源项目 leetcode_problem_ratingLeetCode 周赛/双周赛题目自算难度评分工具为例手把手讲解如何使用vue-i18n在 Vue 3 项目中实现中英双语切换从语言文件组织到一键切换器完整走通国际化落地全流程。先认识一下这个项目LeetCode 题目难度评分工具leetcode_problem_rating 是一个 Vue 3 TypeScript 前端项目它能做什么 展示 LeetCode 每周赛/双周赛题目的自算难度分数基于 Elo 评分系统 最大似然估计 支持按关键词、竞赛编号、分数区间筛选题目 支持中文leetcode.cn/ 英文leetcode.com双语界面一键切换其中双语能力正是通过vue-i18n实现的这也是本文的教学主线。第 1 步安装 vue-i18n按语言组织文案在 package.json 中项目依赖了vue-i18n9.1.10vue-i18n: 9.1.10文案被拆成独立的语言文件每种语言一个模块文件作用src/locale/zh.ts简体中文文案如 关键词、查询、分数区间src/locale/en.ts英文文案如 Keyword、Query、Rating intervalsrc/locale/index.ts汇总导出{ en, zh }消息对象以 src/locale/zh.ts 为例每个界面文案都有对应 keyexport default { lang: Language, keyword: 关键词, query: 查询, reset: 重置, // ... };新手提示key 用英文命名、按功能语义划分中英文名要一一对应这是后续切换不出错的前提。第 2 步创建 i18n 实例自动识别系统语言国际化实例的创建在 src/main.ts只有几行代码却藏着两个巧思const defaultLocale navigator.language.substring(0, 2) || en; const locale localStorage.getItem(locale); const i18n createI18n({ locale: locale ? locale : defaultLocale, fallbackLocale: en, messages, });记住用户选择优先读取localStorage中的locale用户上次手动选了哪种语言刷新后仍保持无记录时跟随系统否则取navigator.language前两位如zh-CN→zh让中国用户默认看到中文兜底回退fallbackLocale: en保证遇到缺失文案时显示英文而非空白。最后通过app.use(i18n)挂载到应用即可。第 3 步模板中用 $t() 替换写死的文字界面文案全部用$t(key)动态获取以 src/views/ProblemRating.vue 为例el-form-item :label$t(keyword) el-input :placeholder$t(placeholder) ... / /el-form-item筛选表单的关键词、竞赛编号、分数区间标签以及重置按钮文字src/views/ProblemRating.vue都是这样实现的——切换语言后全部自动更新无需重新加载页面。第 4 步一键语言切换器下拉菜单页面右上角放了一个 Element Plus 的下拉菜单src/views/ProblemRating.vue菜单项是English和简体中文选中后触发switchLocalefunction switchLocale(locale: string) { i18n.locale.value locale; localStorage.setItem(locale, locale); }两行代码完成两件事修改i18n.locale界面即时切换语言写入localStorage下次访问记忆选择。细节加分项连数据内容也本地化这个项目做得更细的一步是数据本身也随语言切换。题目表中题目名称和竞赛名称两列会根据当前语言展示不同内容并跳转对应站点src/views/ProblemRating.vue中文模式 → 显示TitleZH链接指向leetcode.cn英文模式 → 显示Title链接指向leetcode.com这类数据级国际化在 data.json 中同时存储了中英文字段配合 gen.py 每周重新生成数据最终形成原始排序结果 ratings.txt。如何本地跑起来git clone https://gitcode.com/gh_mirrors/le/leetcode_problem_rating cd leetcode_problem_rating npm install npm run serve启动后浏览器打开本地地址即可体验完整的中英文切换效果。项目整体结构很清爽值得对照源码学习入口与 i18n 初始化src/main.ts语言文案src/locale/页面与切换器src/views/ProblemRating.vue路由与状态src/router/index.ts、src/store/index.ts项目说明README.md新手常见问题Q切换语言后为什么有的文字没变A检查是否还有模板里直接写死的中文/英文全部换成$t(key)并确认两个语言文件 key 一致。QuseI18n()和$t()什么关系A$t()是模板中的快捷方式在script setup里可以import { useI18n } from vue-i18n获取完整实例项目正是用它读取i18n.locale做条件渲染。Q需要配置路由才能切换语言吗A不需要。本项目用 hash 路由src/router/index.ts语言切换只改内存状态 本地存储URL 不变实现更简单。总结通过 leetcode_problem_rating 这个项目可以看到Vue 3 项目落地中英双语其实只需 4 步装包 → 组织语言文件 → 创建 i18n 实例 → 模板换$t()并加切换器。配合fallbackLocale兜底和localStorage记忆就是一个体验完整、可直接复用的国际化方案。把它迁移到你自己的 Vue 3 项目中通常半天即可完成 【免费下载链接】leetcode_problem_ratingSelf-calculated rating of problems in leetcode weekly/biweekly contests.项目地址: https://gitcode.com/gh_mirrors/le/leetcode_problem_rating创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考