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

Posted 2023-02-16

【中文标题】使用 Vue.js 制作多语言网站

【英文标题】：Making a multi language site with 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。感谢您的建议

【参考方案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

祝你好运！