国际化 (i18n)

NovaStack 支持多语言功能，允许您根据用户的地区和偏好提供本地化的用户体验。本指南将指导您如何在项目中实现和管理国际化功能。

配置 i18n

安装依赖

确保已安装必要的 i18n 依赖包。您可以使用以下命令安装：

npm install vue-i18n@9

创建语言文件

在 locales 目录下创建不同语言的 JSON 文件。例如，en/common.json 和 zh/common.json 分别代表英文和中文的语言文件。

英文语言文件 (locales/en/common.json)

{
  "welcome": "Welcome to NovaStack",
  "description": "A powerful framework for building applications."
}

中文语言文件 (locales/zh/common.json)

{
  "welcome": "欢迎使用 NovaStack",
  "description": "一个用于构建应用程序的强大框架。"
}

配置 i18n 模块

在 i18n.config.ts 文件中配置 i18n 模块，加载语言文件并设置默认语言。

import {createI18n} from "vue-i18n"
import en from "../locales/en/common.json"
import zh from "../locales/zh/common.json"

export default createI18n({
  legacy: false,
  locale: "en", // 默认语言
  fallbackLocale: "en", // 回退语言
  messages: {
    en,
    zh,
  },
})

使用翻译

在 Vue 组件中，您可以使用 $t 方法来访问翻译内容。

示例组件

<template>
  <div>
    <h1>{{ $t("welcome") }}</h1>
    <p>{{ $t("description") }}</p>
  </div>
</template>

<script setup lang="ts">
import {useI18n} from "vue-i18n"

const {t} = useI18n()
</script>

切换语言

您可以动态切换应用的语言，通过修改 i18n 的 locale 属性。

示例代码

<template>
  <div>
    <button @click="setLocale('en')">English</button>
    <button @click="setLocale('zh')">中文</button>
  </div>
</template>

<script setup lang="ts">
import {useI18n} from "vue-i18n"

const {locale} = useI18n()

const setLocale = (lang: string) => {
  locale.value = lang
}
</script>

通过以上步骤，您可以在 NovaStack 项目中实现和管理国际化功能，为用户提供本地化的体验。如果您有任何问题或需要进一步的帮助，请随时联系我们的支持团队。