1. 优先补全缺失的语言包键 #

报错提示kn语言环境中找不到docsList.docs，核心原因是你的locales/kn.json文件缺少对应层级的结构。

检查你的locales/en.json结构，比如：

{
  "nav": {
    "home": "Home"
  },
  "docsList": {
    "docs": [
      {"title": "Document 1", "description": "Description for doc 1"},
      {"title": "Document 2", "description": "Description for doc 2"}
    ]
  }
}

需要确保locales/kn.json完全对齐这个层级，哪怕暂时没有翻译内容，也要保留空数组结构：

{
  "nav": {
    "home": "ಕನ್ನಡ ಹೋಮ್"
  },
  "docsList": {
    "docs": []
  }
}

2. 适配Vue I18n v9+组合式API写法 #

Vue I18n v9+对组合式API的使用有明确要求，调整你的脚本代码：

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

// 全局范围使用i18n，确保能获取到全局语言包
const { t } = useI18n({ useScope: 'global' })

// 用computed响应语言切换，同时兜底空数组避免报错
const documents = computed(() => t('docsList.docs') || [])
</script>

3. 配置兜底语言避免SSR警告 #

如果是SSR环境（比如Nuxt3），在i18n配置文件中设置fallbackLocale，当当前语言缺失键时自动回退到默认语言：

import { createI18n } from 'vue-i18n'

// 异步加载语言包
const messages = {
  en: () => import('./locales/en.json'),
  kn: () => import('./locales/kn.json')
}

const i18n = createI18n({
  legacy: false, // 必须开启，适配组合式API
  locale: 'en',
  fallbackLocale: 'en', // 缺失翻译时回退到英文
  messages
})

export default i18n

4. 模板安全优化 #

在模板中做更严谨的空值判断，同时优化v-for的key值：

<template>
  <div>
    <h1>{{ $t('nav.home') }}</h1>
    <div v-if="documents.length > 0">
      <ul>
        <!-- 优先用文档的唯一ID当key，没有才用index -->
        <li v-for="(doc, index) in documents" :key="doc.id || index">
          <h3>{{ doc.title }}</h3>
          <p>{{ doc.description }}</p>
        </li>
      </ul>
    </div>
    <div v-else>
      <!-- 建议把提示文本也做成翻译键，适配多语言 -->
      <p>{{ $t('common.noDocuments') }}</p>
    </div>
  </div>
</template>

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