为所有组件 Vue3 加载 i18n答案

【问题标题】：Load i18n for all components Vue3为所有组件 Vue3 加载 i18n
【发布时间】：2021-09-22 12:12:04
【问题描述】：

使用 vue-i18n 时，我需要将其添加到每个组件中：

setup() {
  const { t, locale } = useI18n();
  return { t, locale };
}

有没有办法将t 函数预加载到我的所有组件中？

【问题讨论】：

标签： vue.js vue-component vuejs3 vue-i18n

【解决方案1】：

您可以如下加载和切换语言。

在 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)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

const locale  = localStorage.getItem('language') || 'tr'
export default new VueI18n({
  locale:  locale,
  fallbackLocale: locale,
  messages: loadLocaleMessages()
})

在 main.js 中

import i18n from './i18n'

new Vue({
  el: "#app",
  router,
  store,
  i18n,
  render: h => h(App),

})

【讨论】：

【解决方案2】：

createI18n() 创建一个 Vue 插件，使 vue-i18n 可全局用于所有组件：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n(/*...*/)
createApp(App).use(i18n).mount('#app')

t 然后在模板中作为$t 可用，locale 是$i18n.locale。

demo

【讨论】：