Как зарегистрировать функцию перевода в приложении

#vue.js #vuejs3

Вопрос:

У меня есть эта функция перевода, чтобы использовать ее, я должен импортировать ее в каждый компонент, что довольно раздражает.

Выглядит как

 import { useI18n } from "vue-i18n";

export default {
   setup() {
       const { t } = useI18n();
       return { t }
   }

 }

main.js похоже на

 import installI18n from "./lang/index";
installI18n(app);

язык/индекс

 const i18n = createI18n({
  locale: getLocale(),
  legacy: false,
  messages,
});

// export default i18n
export default (app) => {
  app.use(i18n);
};

Могу ли я каким-то образом зарегистрировать это в своем приложении, чтобы мне не приходилось каждый раз вставлять его в настройку?

Ответ №1:

Вы можете использовать параметр globalinjectionдля включения глобальной инъекции даже в режиме, отличном от устаревшего (Composition API)

 const i18n = createI18n({
  locale: getLocale(),
  legacy: false,
  globalInjection: true,
  messages,
});

Затем вы должны использовать функции с префиксом $ в своих шаблонах — см. раздел Неявное с введенными свойствами и функциями

1. Кажется, это хорошо работает в html, но для того, чтобы использовать его в моей настройке() Мне нужно его импортировать? Потому что я попытался добавить $t в свою функцию настройки, но там написано, что $t не определен.

2. Вот как это работает в не унаследованном режиме. Прочитайте предоставленную ссылку — setup Она не позволяет увидеть эти свойства и функции, введенные в компонент . Все внутри setup должно быть импортировано, так как нет экземпляра компонента (и this ).

Ответ №2:

Чтобы использовать i18n для всего приложения,

найдите перевести файлы json в locales папке — locales/en.json

 {
  "key": "value",
}

создать i18n.js файл

 import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,s] .json$/i) // Path to the locales folder
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_] )./i)
    if (matched amp;amp; matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

А затем используйте его в качестве параметра при создании приложения Vue — в app.js

 ...
import i18n from './i18n'
...
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#admin-app')

А затем используйте $t() в файлах Vue. — index.vue

 <h3>
  {{ $t('key') }}
</h3>