使用 Vue.js 制作多语言网站答案

【问题标题】：Making a multi language site with Vue.js使用 Vue.js 制作多语言网站
【发布时间】：2021-12-31 19:06:29
【问题描述】：

我对 Vue.js 不是很有经验，但我正在尝试使用 Vue.js 制作一个多语言网站，并想知道是否有一种有效的方法。例如，我不想为我拥有的每个页面创建重复的视图。是否有任何插件可用于该和有效的路由来处理链接？到目前为止，这是我想出的

在我的 vue 页面 Menu.Vue.

<v-list-item>
   <v-list-item-title>English</v-list-item-title>
</v-list-item>
<v-list-item>
<v-list-item-title>
 <router-link to="AnotherLanguagepage">
   AnotherLanguagepage
 </router-link>
</v-list-item-title>

路由器的 index.js

{
    path: '/page_language1',
    name: 'Display',
    component: Display1,
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/page_language2',
    name: 'Display',
    component: Display2,
    meta: {
      requiresAuth: true
    }
  },

所以我对这两种语言都有看法，但这不是可扩展的方法。

【问题讨论】：

你尝试过什么吗？如果是，请提供代码
你可以通过demo github.com/Jebasuthan/…查看i18n
谢谢@Jebasuthan 我会看看它。如果任何挑战弹出窗口将再次链接
哥们，用NUXT读这个i18n.nuxtjs.org
@Ayudh，那会简化一些步骤，但我正在处理的要求需要我坚持使用 vuejs。感谢您的建议

标签： vuejs2 vuetify.js vue-router

【解决方案1】：

如果你正在寻找一个使用 Vue.js 的多语言网站，你最好使用Vue i18n plugin。

不，您不需要在页面/组件中拥有多个视图或数据。基本上，您将拥有一个 lang 文件夹，其中包含 en.js、es.js...（您需要多少 lang）。

// en.js

{
  "general": {
    "myListItemTitle": "My English title"
  }
}

// fr.js

{
  "general": {
    "myListItemTitle": "Mon titre français"
  }
}

<v-list-item>
   <v-list-item-title>{{ $t('general.myListItemTitle') }}</v-list-item-title>
</v-list-item>

// $t is calling plugin and refers to currentLocale (en, es...). Example: en.js

祝你好运！

【讨论】：