Vuetify를 통한 국제화

Vuetify를 통한 국제화

저는 다국어 앱을 만들려고 합니다.

서류에 나와 있는 대로 했는데 작동이 안 돼요.

이건 내 암호야

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>

모든 것이 오류 없이 정상적으로 컴파일되지만, 아무것도 번역되지 않습니다.결과는 항상 함수에 적는 것과 같습니다.

이 경우 표시되는 것은 다음과 같습니다.

데이터 텍스트 없음

확실하지 않습니다. 어떤 버전의vuetify.js를 사용하고 있는데, 이 문제에 따라 아직 출시되지 않은 버전 1.4.0에서 스페인어 로케일이 추가되었습니다.

업데이트:

이 호에서 로그인한 번역문서에 오류가 있습니다.템플릿을 다음과 같이 변경합니다.

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

그러면 문제가 해결됩니다.

온라인 데모

당신이 하려는 것이 아니라 vue-i18n을 사용하는 것이 좋습니다.저는 회사에서 vue를 기업 프로젝트에 사용하고 있는데, 그것을 사용하는 것을 제안할 수 있습니다.여기 수표 vue-i18n이 있습니다.vue와 플러그인에 대한 질문이 있으면 기꺼이 답변해 드리겠습니다.

템플릿 변경 대상:

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

나는 그 물건 안에 있는 방법이 나에게 있어서 이 작업이라는 것을 알게 되었다.

예를 들어 다음과 같습니다.

 {{$vuetify.lang.translator("enter key set in locales property")}} 

현재 로케일로 변환합니다.

필요한 로케일을 Import 하는 것을 잊지 말아 주세요.

언급URL : https://stackoverflow.com/questions/53452496/internationalization-with-vuetify