在 Vue 3 中使用 Vue I18n 的用法与 Vue 2 类似,但有一些细微的差别。下面是在 Vue 3 中使用 Vue I18n 的基本用法:
-
安装 Vue I18n
通过 npm 或 yarn 安装 Vue I18n:
npm install vue-i18n@next
-
创建语言文件
在你的项目中,创建一个目录用于存放语言文件,例如
lang
,然后在该目录下创建每个语言的 JSON 文件。每个文件包含一个 JSON 对象,其中键是文本的 key,值是对应语言的翻译:// lang/en.json { "greeting": "Hello", "message": "Welcome to my app" } // lang/fr.json { "greeting": "Bonjour", "message": "Bienvenue dans mon application" }
-
创建 Vue I18n 实例并挂载到应用程序
在你的应用程序的入口文件中,导入 Vue I18n 并创建一个 Vue I18n 实例。可以根据需要配置该实例,例如设置默认语言和加载语言文件。然后,使用
createApp
方法创建 Vue 应用程序,并将 Vue I18n 实例作为插件进行注册:import { createApp } from 'vue' import { createI18n } from 'vue-i18n' import en from './lang/en.json' import fr from './lang/fr.json' import App from './App.vue' const i18n = createI18n({ locale: 'en', // 默认语言 messages: { en, // 英文语言文件 fr, // 法语语言文件 } }) const app = createApp(App) app.use(i18n) app.mount('#app')
-
在 Vue 组件中使用翻译文本
在 Vue 3 中,你可以使用
$t
方法或t
函数来访问翻译的文本。可以在模板中或 JavaScript 中使用这些方法:<!-- 模板中 --> <template> <div> <p>{{ $t('greeting') }}</p> <p>{{ $t('message') }}</p> </div> </template> <!-- JavaScript 中 --> <script> import { useI18n } from 'vue-i18n' export default { setup() { const { t } = useI18n() // 使用 t 函数访问翻译文本 console.log(t('greeting')) console.log(t('message')) return {} } } </script>
以上就是在 Vue 3 中使用 Vue I18n 的基本用法。记得根据具体需求进一步了解 Vue I18n 的高级功能,如日期、数字格式化,动态语言切换等。详细的 API 文档和示例可以在 Vue I18n 的官方网站上找到:https://vue-i18n.intlify.dev/zh/