如何将用户位置设置为 i18n？

Question

我想通过获取用户浏览器使用的语言来设置应用程序语言，我知道我可以通过 navigator.language 做到这一点，我也可以使用一些东西将它应用到 main喜欢：locale = navigator.language || navigator.userLanguage.

但是，我觉得有趣的是，用户可以根据自己的喜好选择更改语言，所以我在“设置”页面上做了类似的事情：

<select v-model="$i18n.locale">
  <option
    v-for="locale in $i18n.availableLocales"
    :key="`locale-${locale}`"
    :value="locale"
  >
    {{ locale }}
  </option>
</select>

但是，要将更改应用到 main.js 文件，我需要修复区域设置，因为我做了一个奇怪的解决方案，现在我需要在继续之前修复它：

import { createI18n } from "vue-i18n/index";
import en from "./en.json";
import ja from "./ja.json";
import pt from "./pt-br.json";

const messages = {
  "English": en,
  "Português": pt,
  "日本語": ja,
};

// Create i18n instance with options
export const i18n = createI18n({
  locale: "English",
  fallbackLocale: ["Português", "日本語"],
  messages,
});

虽然这可行，但在我看来这是非常不正确的。这个奇怪的解决方案允许用户看到 English 而不是 en，Português 而不是 pt，等等...但现在我需要解决这个问题。

如果没有我创建的这个解决方法，我怎么能显示位置的值而不是它们的键？

然后，我打算定义语言的方式真的是最好的吗？

Answer 1

获取您的应用支持的语言列表

const availibleLocales = this.$i18n.availableLocales;

然后，获取用户浏览器的语言

const usersLanguage = window.navigator.language

然后，如果支持用户语言，则应用它。否则应用默认语言

if (availibleLocales.includes(usersLanguage)) {
  this.$i18n.locale = language;
} else {
  this.$i18n.locale = 'en';
}

所有这些都将在您的最上层组件（通常是 App.ts）中完成，并在 mounted() 方法中开始。

如何将用户位置设置为 i18n？

How to set user location to i18n?

locale

vue.js

vue-i18n