Vue.js Vue-i18n单文件组件不工作

我正在尝试用sfc方法在我的项目中实现v-i18n。我不能让它工作。我不会让你对我的项目感到困惑，这就是为什么我只是修改了，在官方的v-i18n sfc示例中添加了10-15行代码

这很简单地说明了我的问题

对于那些喜欢在github上查看这个非常小的问题项目的人

组件1.vue

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

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

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

{{$t（'lang'）}

{
“en”：{
“郎”：“英语”
},
“es”：{
“朗”：“埃斯帕诺”
}
}

App.vue

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

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

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

场所
EN
锿
消息：{{$t（'hello'）}

{
“en”：{
“你好”：“你好”
},
“es”：{
“你好”：“你好”
}
}
从“./components/component1”导入组件1
导出默认值{
组成部分：{
Comp1
},
名称：“应用程序”，
数据（）{return{locale:'en'}}，
观察：{
区域设置（val）{
此值为。$i18n.locale=val
}
}
}

因此，在多个组件中有多个

标记。我刚刚从App.vue修改了$i18n.locale，但它没有在Component1上启动相关的i18n函数

$t（'lang'）

，只是在其自身上修改了

$t（'hello'）

。

---

如何使其工作？

使用vue devtools u会发现单个文件组件中$i18n的消息彼此不同，因此它们是不同的对象

你需要做的是：

i18n.js

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
}

---

看看这个。

很明显，你依靠的是。那么，您是否安装并配置了vue.config.js？@vahdet是的，您可以查看我的github repo。我并没有把所有的东西都抄下来让问题变得不可读，即使它很小。