如何在 vuetify 中设置语言？答案

【问题标题】：How to set language in vuetify?如何在 vuetify 中设置语言？
【发布时间】：2019-07-22 16:48:04
【问题描述】：

我正在尝试用这个设置语言环境：

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'
    }
});

然后我用以下命令更改当前语言环境：

this.$vuetify.lang.current = 'en-US';

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

有人知道为什么吗？

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

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

您仍然可以在 App 的 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';
    }
  }
})

<script src="https://unpkg.com/vue@2.6.7"></script>
<script src="https://unpkg.com/vuetify@1.5.4/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@1.5.4/dist/vuetify.min.css">

<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-xl>
        <v-btn @click="changeLocale">Change locale</v-btn>
        <div>{{ $vuetify.lang.current }} - {{ $vuetify.t('$vuetify.noDataText') }}</div>
      </v-container>
    </v-content>
  </v-app>
</div>

【讨论】：

【解决方案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 中找到有关更改引导的详细信息。

【讨论】：