您可以先在 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 条新信息。`。
 

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐