使用 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>

一切正常编译没有错误，但它不翻译任何东西。结果总是我在函数中写的。

在这种情况下，出现的是

无数据文本

Answer 1

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

更新：

在此问题中记录的 vuetify 翻译文档中存在错误，请将您的模板更改为：

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

它将解决您的问题。

在线演示。

Answer 2

我建议你使用 vue-i18n 而不是你想要做什么。我在工作中使用 vue 进行企业项目，我可以建议你使用它。在这里您可以查看文档vue-i18n。如果您有任何关于 vue 及其插件的问题，我很乐意回答您的其他问题。