) {
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',
createApp({
}).use(i18n).mount('#app')
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) {
const messages = await import(
`./locales/${locale}.json`
i18n.global.setLocaleMessage(locale, messages.default)
return nextTick()
悟空和大王
137.5k
粉丝
