Question

我正在尝试使用以下方法设置语言环境：

GetItems()
    .Select(i => new Action(i.DoStuf)))
    .Aggregate((a, b) => a + b)
    .Invoke();

，然后我用以下命令更改当前区域设置：

Vue.use(Vuetify, {
    lang: {
        locales: { 
            'en-US' : {
                "dataIterator": {
                    "rowsPerPageText": "Items per page:",
                    "rowsPerPageAll": "All",
                    "pageText": "{0}-{1} of {2}",
                    "noResultsText": "No matching records found",
                    "nextPage": "Next page",
                    "prevPage": "Previous page"
                },
                "dataTable": {
                    "rowsPerPageText": "Rows per page:"
                },
                "noDataText": "No data available"
            } 
        },
        current: 'en-US'
    }
});

但是我收到有关Vue没有针对当前语言环境进行翻译的警告。

有人知道为什么吗？

Answer 1

如果您正在使用CDN中的Vuetify（在浏览器中通过<script>标签使用），则Vue在加载脚本时已经安装了Vuetify插件，因此稍后再次调用Vue.use(Vuetify, ...)实际上没有任何作用。。可用的默认（唯一）语言环境是en。

您仍然可以在App的{{1}}钩子中更新可用的语言环境：

created

created() {
  this.$vuetify.lang.locales = {
    en: {
      noDataText: 'Nothing'
    },
    es: {
      noDataText: 'Nada'
    }
  }
},

new Vue({
  el: '#app',
  created() {
    this.$vuetify.lang.locales = {
      en: {
        noDataText: 'Nothing'
      },
      es: {
        noDataText: 'Nada'
      }
    }
  },
  methods: {
    changeLocale() {
      const currentLang = this.$vuetify.lang.current;
      this.$vuetify.lang.current = currentLang === 'es'
                                 ? 'en'
                                 : 'es';
    }
  }
})

Answer 2

https://github.com/vuetifyjs/vuetify/issues/7644中已报告此问题，由于在v2.0中重新构建了引导过程，因此该问题现在似乎已解决：

new Vue({
  el: '#app',
  vuetify: new Vuetify({
    lang: {
      t: (key, ...params) => i18n.t(key, params)
    }
  })
})

有关完整示例，请查看this codepen。

在migration guide中可以找到有关更改的引导程序的详细信息。

如何在vuetify中设置语言？

2 个答案: