vue3使用vue-i18n

安装

npm i vue-i18n@next

配置

// locales/i18n.ts
import { createI18n } from 'vue-i18n'

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}
const i18n = createI18n({
  // legacy: false,
  // globalInjection: true,

  locale: 'ja',
  messages
})

export default i18n

// main.ts
import i18n from 'locales/i18n'

const app = createApp(App)
app.use(i18n)

使用

在ts文件中使用

import i18n from 'locales/i18n'
import { ElMessage } from 'element-plus'

export async function doTest() {
  ElMessage({
    message: i18n.global.t('message.hello')
  })
  console.log(i18n.global.t('message.hello'))
}

在vue文件中使用

<script lang="ts" setup>
    import { useI18n } from 'vue-i18n'
    const { t } = useI18n()
    console.log('i18n', t('message.hello'))
</script>

<template>
    {{ $t("message.hello") }}
</template>

语言切换

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

const i18n = createI18n({
  locale: 'ja', // set current locale
  // vue-i18n something options here ...
  // ...
})

// create Vue app instance, install Vue I18n, and mount!
createApp({
  // something vue options here ...
  // ...
}).use(i18n).mount('#app')

// change locale via `global` property
i18n.global.locale = 'en'

加载远程国际化数据

import { nextTick } from 'vue'
import { createI18n } from 'vue-i18n'

export const SUPPORT_LOCALES = ['en', 'ja']

export function setupI18n(options = { locale: 'en' }) {
  const i18n = createI18n(options)
  setI18nLanguage(i18n, options.locale)
  return i18n
}

export function setI18nLanguage(i18n, locale) {
  if (i18n.mode === 'legacy') {
    i18n.global.locale = locale
  } else {
    i18n.global.locale.value = locale
  }
  /**
   * NOTE:
   * If you need to specify the language setting for headers, such as the `fetch` API, set it here.
   * The following is an example for axios.
   *
   * axios.defaults.headers.common['Accept-Language'] = locale
   */
  document.querySelector('html').setAttribute('lang', locale)
}

export async function loadLocaleMessages(i18n, locale) {
  // load locale messages with dynamic import
  const messages = await import(
    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
  )

  // set locale and locale message
  i18n.global.setLocaleMessage(locale, messages.default)

  return nextTick()
}