您可以先在 Vue 实例中引入 `vue-i18n` 插件,并在 `components` 中需要使用的组件中注册 `i18n` 属性。然后,您可以在 `locales` 对象中定义您需要支持的语言类型和相应的翻译:
import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);
const messages = {
en: {
greeting: 'Hello, {name}!',
message: 'You have {count} new messages.',
},
zh: {
greeting: '你好,{name}!',
message: '你有 {count} 条新信息。',
},
};
const i18n = new VueI18n({
locale: 'en', // 当前语言设置为英语
messages, // 引入语言文件
});
new Vue({
el: '#app',
i18n,
components: {
MyComponent,
},
// ...
});
然后,在需要展示翻译的地方可以使用 `$t` 方法,并使用 `{}` 来作为数字的占位符。例如:
<template>
<div>
<p>{
{ $t('greeting', {name: 'Tom'}) }}</p>
<p>{
{ $t('message', {count: 10}) }}</p>
</div>
</template>
这样,在英语环境下,
第一个 `<p>` 将会渲染为 `Hello, Tom!`,
第二个 `<p>` 将会渲染为 `You have 10 new messages.`;
而在中文环境下,
第一个 `<p>` 将会渲染为 `你好,Tom!`,
第二个 `<p>` 将会渲染为 `你有 10 条新信息。`。