实现

1. 语言包json文件懒加载
2. 初始化自动检测、持久化用户浏览器当前语言
3. 在项目中任意ts文件以及vue文件<script>标签内直接使用$t，不再需要编写重复的const { t } = useI18n()！

依赖版本（于2025.1.19选用，基本算是当下最新版了）：

{
  "dependencies": {
    "vue-i18n": "10",
    "unplugin-auto-import": "^19.0.0",
  }
}

./vite.config.mts

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        'vue',
        { '@/i18n': ['$t'] },
      ],
    })
  ]
})

./src/i18n.ts

import { createI18n } from 'vue-i18n'

// 支持的语言
const SUPPORT_LANGS = ['zh', 'en', 'ja']
// 默认语言
const DEFAULT_LANG = 'en'

// 获取支持的语言
const checkLang = (lang: string) =>
  SUPPORT_LANGS.find(l => l.toLowerCase() === lang.toLowerCase().split('-')[0]) || DEFAULT_LANG

// 持久化语言偏好
const langStorage = useStorage('app-lang', checkLang(navigator.language))

// 创建 i18n 实例
const i18n = createI18n({
  legacy: false,
  locale: langStorage.value,
  fallbackLocale: DEFAULT_LANG,
  messages: {},
})

// 动态加载语言文件
const loadLangAsync = async (lang: string = langStorage.value) => {
  const targetLang = checkLang(lang)
  if (!i18n.global.availableLocales.includes(targetLang)) {
    try {
      const { default: messages } = await import(`@/locale/${targetLang}.json`)
      i18n.global.setLocaleMessage(targetLang, messages)
      console.log(`载入语言成功: ${targetLang}`)
      console.log(`当前语言: ${i18n.global.locale.value}`)
    } catch (error) {
      console.error(`无法载入语言: ${targetLang}`, error)
      console.log(`当前语言: ${i18n.global.locale.value}`)
    }
  }
  langStorage.value = i18n.global.locale.value = document.documentElement.lang = targetLang
}

// 初始化载入语言
loadLangAsync()

export const $t = i18n.global.t
export default i18n

最后

直接项目中的任何位置直接使用下面的写法

// 示例1
<v-btn
  :text="$t('action.forget')"
/>

// 示例2
console.log($t('message.hello'))