2

Поставил i18n для vue. Задача такая: менять язык в зависимости от локалки браузера.

export let i18n = new VueI18n({
  locale: navigator.language,
  fallbackLocale: navigator.language,
  messages,
})

Это не работает для меня, выдает ошибку, что локаль не опеределена, а также ошибки Cannot read property '_t' of undefined.
Если локаль указывать так: 'en' - все работает.

2
  • Описание проблемы следует писать для нетелепатов - подробнее, чем "не работает".
    – yar85
    17 дек 2019 в 0:35
  • 1
    исправил, благодарю
    – Ivan Navi
    17 дек 2019 в 6:42

2 ответа 2

1

Надо либо объявить языки в том же формате как у значения navigator.language - либо менять это значение, для соответствия формату объявления языков...

const messages = {
  en: {
    message: { hello: 'Hello world' }
  },
  ru: {
    message: { hello: 'Привет, мир' }
  }
}; 
const i18n = new VueI18n({
  locale: window.navigator.language.slice(0, 2), 
  messages
}); 
new Vue({ i18n }).$mount('#app'); 
<div id="app">
  <p>{{ $t("message.hello") }}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.min.js"></script>

5
  • @IvanNavi, Поясни пожалуйста, чем именно не устроило решение в данном ответе? (не в качестве претензии, просто мне любопытно 🤔 Критика в комментах может оказаться полезна и другим)
    – yar85
    17 дек 2019 в 6:50
  • Я не писал о том, что меня что-то не устроило в Вашем ответе. Позабыл о том, что решение так и не отметил как за полезный ответ :) Глядя на Ваш ответ, понял, в чем была моя ошибка изначально, с чем накосячил. Писал вместо window.navigator.language просто navigator.language. Ваше решение в разы короче моего. Как оказалось, все проще, чем кажется
    – Ivan Navi
    18 дек 2019 в 7:35
  • @IvanNavi, Я же не ради галочки) А ситуация с полным путем свойства - на самом деле интересная, у меня работало и без window. Вероятно, в твоем проекте есть код который объявляет переменную navigator. Вообще изначально я предположил суть проблемы что языки в объекте объявлены в формате 'ru', тогда как navigator.language возвращает строку в формате 'ru-RU' :)
    – yar85
    18 дек 2019 в 10:15
  • прошу прощения за беспокойство! сейчас использую vue-i18n совместно со store. Код в сторе аналогичный тому, что написан здесь: medium.com/@helena.wuv/…. Может быть у Вас будут идеи, как мне вместо 'ru', в state locale записывать локаль браузера?
    – Ivan Navi
    11 мар 2020 в 12:59
  • @ivannavi, Если стор vuex, то через мутацию, как описано в оф. документации этой библиотеки.
    – yar85
    12 мар 2020 в 13:40
0

Не знаю, насколько это правильная практика, но в хук beforeMount() я положил следующий код, и это сработало для меня.

if (
      window.navigator.language === "en-US" ||
      window.navigator.browserLanguage === "en-US" ||
      window.navigator.userLanguage === "en-US" ||
      window.navigator.systemLanguage === "en-US" 
    ) {
      this.$i18n.locale = "en";
    } else if (
      window.navigator.language === "ru-RU" ||
      window.navigator.browserLanguage === "ru-RU" ||
      window.navigator.userLanguage === "ru-RU" ||
      window.navigator.systemLanguage === "ru-RU"
    ) {
      this.$i18n.locale = "ru";
    }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.