vue-i18n：依赖于语言的视图

Question

我在我的应用程序中使用 vue-i18n。现在我想添加一个包含大量文本和链接的“关于”视图。

我认为拥有多个依赖于语言的视图比在一个视图中添加多个 {{ $t(...)}} 更易于维护 about.vue。

我考虑过将语言 ISO 代码添加到视图名称中：

.../about.en.vue
.../about.de.vue
.../about.es.vue

与 vue-i18n 结合和集成的最佳方式是什么？可能有不同的方法？

Answer 1

您可以使用动态组件来实现：

<template>
  <component :is="localizedAbout" />
</template>

<script>
import AboutEn from '../about.en.vue';
import AboutEs from '../about.es.vue';
import AboutDe from '../about.de.vue';

export default {
  components: {
    AboutEn,
    AboutEs,
    AboutDe,
  },
  computed: {
    localizedAbout() {
      switch (this.$i18n.locale) {
        case 'en':
          return AboutEn;
        case 'es':
          return AboutEs;
        case 'de':
          return AboutDe;
        default:
          return '';
      }
    },
  },
}
</script>

Answer 2

在做了一些其他事情后，我今天能够通过使用动态导入解决这个问题：


    <template>
      <b-container class="about">
        <component :is="langComponent" />
      </b-container>
    </template>
    <script>
    
    export default {
      name: 'AboutView',
      data () {
        return {
          langComponent: null
        }
      },
      mounted () {
        this.$watch(
          '$i18n.locale',
          (newLocale, oldLocale) => {
            if (newLocale === oldLocale) {
              return
            }
            this.setLangAbout()
          },
          {
            immediate: true
          }
        )
      },
      methods: {
        setLangAbout () {
          try {
            import('@/components/about/About.' + this.$i18n.locale + '.vue').then(module => {
              this.langComponent = module.default
            })
          } catch (err) {
            console.log(err)
            import('@/components/about/About.en.vue').then(module => {
              this.langComponent = module.default
            })
          }
        }
      }
    }
    </script>

感谢@Pochwar 的初步回答。基于此，我做了一些更多的研究。以下链接帮助我解决了这个问题：

How does Dynamic Import in webpack works when used with an expression?
评论错误：找不到具有动态导入的模块

vue-i18n：依赖于语言的视图

vue-i18n: language dependent view

vue.js

internationalization

vue-i18n