Vue-i18n动态加载翻译消息前如何不显示任何内容？

有几种可行的方式实现需求，以下是具体方案：

方法一：利用Vue-i18n内置的missing钩子 #

这是最全局的解决方案，当翻译键不存在时，直接返回空字符串。

Vue 3 + Vue-i18n v9 示例： #

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'zh-CN',
  fallbackLocale: 'zh-CN',
  // 找不到翻译时返回空字符串
  missing: (locale, key) => ''
})

Vue 2 + Vue-i18n v8 示例： #

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'zh-CN',
  fallbackLocale: 'zh-CN',
  missing: (locale, key) => ''
})

方法二：结合加载状态做条件渲染 #

在组件内通过响应式变量标记翻译是否加载完成，仅在加载完成后显示翻译内容。

<template>
  <!-- 未加载完成时显示空白 -->
  <span v-if="isTransLoaded">{{ $t('common.submit') }}</span>
  <span v-else></span>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'

const { loadLocaleMessages } = useI18n()
const isTransLoaded = ref(false)

onMounted(async () => {
  // 从服务器获取翻译数据
  const transData = await fetch('/api/translations/zh-CN').then(res => res.json())
  // 加载翻译消息
  await loadLocaleMessages('zh-CN', transData)
  // 标记加载完成
  isTransLoaded.value = true
})
</script>

方法三：自定义翻译函数封装$t #

封装Vue-i18n的翻译函数，判断如果返回的是原始翻译键（即未找到对应翻译），则返回空字符串。

// 封装自定义useI18n
import { useI18n as useVueI18n } from 'vue-i18n'

export function useI18n() {
  const { t: originalT, ...rest } = useVueI18n()
  
  const t = (key, ...args) => {
    const result = originalT(key, ...args)
    // 如果翻译结果等于原始键，说明未找到翻译，返回空
    return result === key ? '' : result
  }
  
  return { t, ...rest }
}

在组件中使用这个自定义的useI18n即可：

<script setup>
import { useI18n } from '@/utils/i18n' // 引入自定义的useI18n

const { t } = useI18n()
</script>

<template>
  <span>{{ t('common.submit') }}</span>
</template>

内容的提问来源于stack exchange，提问作者Magmatic