Vue-i18n 싱글 파일 컴포넌트가 작동하지 않음

Vue-i18n 싱글 파일 컴포넌트가 작동하지 않음

sfc 방식으로 프로젝트에 v-i18n을 구현하려고 합니다.나는 그것을 해낼 수 없었다.제 프로젝트와 혼동하지 않도록 하겠습니다.그래서 공식 v-i18n sfc 예제에 10~15줄의 코드를 추가하는 것으로 수정한 것입니다.

이것은 매우 간단하게 나의 질문을 보여준다.

원하는 분은 github에서 이 아주 작은 질문 프로젝트를 확인하세요.

https://github.com/berkansivri/V-i18n-Question

컴포넌트 1표시하다

<template>
    <p>{{$t('lang')}}</p>
</template>

<i18n>
{
  "en":{
    "lang" : "English"
  },
  "es":{
    "lang": "Espanol"
  }
}
</i18n>

App.vue

<template>
  <div id="app">
    <label for="locale">locale</label>
    <select v-model="locale">
      <option>en</option>
      <option>es</option>
    </select>
    <p>message: {{ $t('hello') }}</p>
    <Comp1></Comp1>
  </div>
</template>

<i18n>
{
  "en": {
    "hello": "hello"
  },
  "es": {
    "hello": "hola"
  }
}
</i18n>

<script>
import Comp1 from './components/component1'
export default {
  components:{
    Comp1
  },
  name: 'App',
  data () { return { locale: 'en' } },
  watch: {
    locale (val) {
      this.$i18n.locale = val
    }
  }
}
</script>

그래서 여러 개<i18n>여러 컴포넌트에 태그를 붙입니다.App.vue에서 $i18n.locale을 수정했는데 i18n 관련 기능이 실행되지 않았습니다.$t('lang')Component1에서는 수정만 합니다.$t('hello')스스로요.어떻게 하면 될까요?

vue devtools를 사용하면 단일 파일 컴포넌트에 포함된 $i18n의 메시지가 서로 다르므로 서로 다른 개체임을 알 수 있습니다.

필요한 것은 다음과 같습니다.

i18n.displaces

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from '@/lang'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'cn',
  fallbackLocale: 'en',
  messages
})

export default i18n

App.vue

import i18n from "./i18n.js"
i18n.locale = "en"

이는 단일 파일 구성 요소의 의도된 동작입니다.모든 컴포넌트의 모든 로케일을 변경할 경우 다음을 사용할 수 있습니다.

locale (val) {
  // this.$i18n.locale = val
  this.$root.$i18n.locale = val
}

이 문제를 참조하십시오.

언급URL : https://stackoverflow.com/questions/56125033/vue-i18n-single-file-component-not-working