Vue-i18n 单文件组件不工作答案

【问题标题】：Vue-i18n Single File Component Not WorkingVue-i18n 单文件组件不工作
【发布时间】：2019-10-01 03:54:36
【问题描述】：

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

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

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

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

Component1.vue

<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>tag。我刚刚从 App.vue 修改了 $i18n.locale，但它没有在 Component1 上触发相关的 i18n 函数 $t('lang')，只是在其自身上修改了 $t('hello')。我怎样才能让它发挥作用？

【问题讨论】：

显然你依赖this guide。那么，你安装vue-i18n-loader并为其配置vue.config.js了吗？
@vahdet 是的，你可以查看我的 github 仓库。我没有复制所有内容以使问题难以阅读，即使它非常小。

标签： vue.js vuejs2 vue-i18n

【解决方案1】：

使用vue devtools你会发现$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"

【讨论】：

【解决方案2】：

这是单文件组件的预期行为。如果您想更改所有组件的所有语言环境，您可以使用：

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

看到这个issue。

【讨论】：