Vuetify国际化

Question

我正在尝试制作具有多种语言的应用程序。

我按照文档中的说明进行了操作，但不起作用。

这是我的代码。

window.Vue = require('vue');
import Vuetify from './Vuetify/vuetify';
import en from './Vuetify/Lang/en/en.ts';
import es from './Vuetify/Lang/es/es.ts';
Vue.use(Vuetify, {
   lang: {
       locales: {
           es,
           en,
       },
       current: 'es'
   }
})
const app = new Vue({
   el: '#app',
   components: {
       "vue-landing": require('./components/ExampleComponent.vue'),
   },
   created() {
       this.$vuetify.lang.current = 'es'
   },
 }).$mount('#app');

在我的组件中

<template>
    <v-content>
      {{ $vuetify.t('noDataText') }}
    </v-content>
</template>

所有内容都能正常编译而不会出错，但是不会翻译任何内容。结果始终是我在函数中编写的。

在这种情况下，出现的是

noDataText

Answer 1

我建议您使用vue-i18n代替您尝试做的事情。我正在为企业项目使用vue，我可以建议您使用它。在这里，您会看到一份检查文档vue-i18n。如果您对vue及其插件有任何疑问，我很乐意回答您的其他问题。

Answer 2

不确定，您使用的是vuetify.js的哪个版本，但是根据此issue，在尚未发布的版本1.4.0中添加了西班牙语语言环境。 ，可能就是问题所在。

更新：

在this issue中登录时，翻译翻译文档时出现错误，请将模板更改为：

<template>
    <v-content>
      {{ $vuetify.t('$vuetify.noDataText') }}
    </v-content>
</template>

它将解决您的问题。

Online demo。

Answer 3

将模板更改为：

    <template>
        <v-content>
          {{ $vuetify.lang.t('$vuetify.noDataText') }}
        </v-content>
    </template>