Vue i18n，如何获取 dateTimeLocalization 的语言环境？答案

【问题标题】：Vue i18n, how to get the locale for the dateTimeLocalization?Vue i18n，如何获取 dateTimeLocalization 的语言环境？
【发布时间】：2019-12-17 01:24:37
【问题描述】：

我正在关注this tutorial 在我的 vue 代码中实现 i18n。它完美地工作，带来一点不便。我目前有硬编码的语言。这是我的本地化文件的样子：

export default: {
    'fr-fr': {
        ...
    },
    'fr-ca': {
        ...
    },
    'en-us': {
        ...
    }
}

我这样指定语言环境：

<td>{{ $d(new Date(date), 'short', 'fr-ca') }}</td>

效果很好，但我希望能够获得用户所拥有的语言，而不是对其进行硬编码。类似于：

<td>{{ $d(new Date(date), 'short', 'app.i18n.locale') }}</td>

或

<td>{{ $d(new Date(date), 'short', 'this.$i18n.locale') }}</td>

但是这些或类似的更改都不起作用。后备方案正在启动：

[vue-i18n] 从 'this.$i18n.locale 日期时间格式回退到 'en' 日期时间格式。

如何在不进行硬编码的情况下实现我想要的？

编辑：另一个例子是this one。我有相同的代码，但不是'ja-JP'，我想自动处理它。

【问题讨论】：

标签： vue.js vue-i18n

【解决方案1】：

您可以尝试从浏览器中获取首选语言列表，并假设其中第一个是用户最喜欢的语言：

var userLanguage = ((navigator.languages && navigator.languages[0]) || '').substr(0, 2);

【讨论】：

虽然这是一个很好的建议，但我认为这与我的代码不兼容，因为我不仅需要前两个字符，还需要代码。所以fr-ca 而不仅仅是fr。此外，我相信 Vue 对此有解决方案，但我就是找不到。
好吧，您可以在没有substr() 的情况下简单地获取全部价值 - 在我的情况下，全部价值更多的是不便而不是有用。我怀疑Vue-i18n 中是否有针对此问题的内置解决方案，但如果您知道它的存在，我想了解更多相关信息。
当然。要使其正常工作还需要进行任何其他更改吗？因为我收到了这个错误：[Vue warn]: Error in render: "TypeError: ((navigator.languages && navigator.languages[0]) || "") is not a constructor"

【解决方案2】：

根据您的问题，我希望您将选定的语言环境保存到键“语言环境”下的对象“i18n”。

基本上，您的函数 $d(new Date(date), 'short', 'app.i18n.locale') 确实有效，但在您的示例中，您有一个字符串，您应该在其中使用语言环境。因此，将刻度线 ' 更改为反引号 `。

new Vue({
  el: '#example',
  data: {
    i18n: {"locale": 'fi-FI'}
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="example">
  <p>{{ new Date().toLocaleDateString(`${i18n.locale}`, {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'}) }}</p>
</div>

【讨论】：