Vue Academy · 课时

配置 vue-i18n 与消息文件

Q: 「配置 vue-i18n 与消息文件」这节课中我会学到什么？

createI18n()、locale JSON 文件、消息语法 {name}、嵌套键，以及备用区域设置 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

createI18n()、locale JSON 文件、消息语法 {name}、嵌套键，以及备用区域设置

配置 vue-i18n 与消息文件 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

什么是 i18n？

国际化（i18n）是指构建能够呈现多种语言文本的 app。Vue I18n是用于翻译 Vue app 的官方风格库。

您不再把英文字符串硬编码到代码中，而是查找能够解析为当前语言的键。

安装 Vue I18n

添加该软件包。对于 Vue 3，请使用 9 或更高版本，因为这些版本基于组合式 API 构建。

// terminal
// npm install vue-i18n

消息文件

翻译存放在消息对象中，每种区域设置对应一个对象。键映射到翻译后的字符串。请从英文开始。

const en = {
  greeting: "Hello",
  nav: {
    home: "Home",
    about: "About",
  },
}

添加土耳其语区域设置

每种区域设置都应保持相同的键结构，这样每种语言中都会存在所有键。

const tr = {
  greeting: "Merhaba",
  nav: {
    home: "Ana Sayfa",
    about: "Hakkinda",
  },
}

创建 i18n 实例

createI18n会构建实例。设置locale（当前语言）、fallbackLocale（键缺失时使用的语言）以及messages映射。

import { createI18n } from "vue-i18n"

const i18n = createI18n({
  legacy: false,
  locale: "en",
  fallbackLocale: "en",
  messages: { en, tr },
})

为何设置 legacy：false

设置legacy: false会启用组合式 API 模式，这是现代 Vue 3 app 所使用的模式。它会解锁您将在下一课中学习的useI18n组合式函数。

const i18n = createI18n({
  legacy: false, // Composition API mode
  locale: "en",
  messages: { en, tr },
})

在 app 中注册

使用app.use(i18n)将该实例作为插件安装。这样，整个组件树中都可以使用翻译辅助工具。

import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
app.use(i18n)
app.mount("#app")

在模板中使用 $t

安装完成后，每个模板都可以调用$t(key)，在当前区域设置中查找翻译。

<template>
  <h1>{{ $t("greeting") }}</h1>
  <a>{{ $t("nav.home") }}</a>
</template>

fallbackLocale 的工作方式

如果当前区域设置中缺少某个键，Vue I18n 会回退到fallbackLocale，而不是显示原始键。这样可以让界面在翻译进行期间仍然保持合理。

// tr is missing "tagline" -> falls back to en
// {{ $t("tagline") }} renders the English text

使用占位符进行插值

消息可以在花括号中包含命名占位符。将值作为第二个参数传入即可填充这些占位符。

const en = {
  welcome: "Welcome, {name}!",
}

// template:
// {{ $t("welcome", { name: "Ada" }) }}
// => "Welcome, Ada!"

组织消息文件

对于实际的 app，请将每种区域设置放在独立的文件中（en.json、tr.json），然后导入这些文件。这样可以让翻译更易于管理，也便于翻译人员独立工作。

// locales/en.json, locales/tr.json
import en from "./locales/en.json"
import tr from "./locales/tr.json"

createI18n({ locale: "en", messages: { en, tr } })

快速检查

检查您对 Vue I18n 设置的理解。

总结

您完成了 Vue I18n 的设置：

i18n 表示通过查找键来呈现多种语言的文本。
为每种区域设置定义一个具有相同键结构的消息对象。
createI18n接收locale、fallbackLocale和messages；使用legacy: false启用组合式模式。
使用app.use(i18n)进行安装，并在模板中使用$t(key)进行翻译。
像{name}这样的占位符通过第二个参数填充。

常见问题解答

「配置 vue-i18n 与消息文件」课时是免费的吗？

是的 — 「配置 vue-i18n 与消息文件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「配置 vue-i18n 与消息文件」这节课中我会学到什么？

createI18n()、locale JSON 文件、消息语法 {name}、嵌套键，以及备用区域设置你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「配置 vue-i18n 与消息文件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy