看起来你遇到的问题是误用了 $tm 方法导致的哦！咱们先理清楚问题根源，再一步步解决：

首先要明确 vue-i18n 里 $tm 和 $t 的区别：

• $t('key') 是日常翻译最常用的方法，直接返回翻译后的文本内容，这正是你想要渲染 "John" 应该用的方法
• $tm('key') 是用来获取编译后的消息AST结构的，它返回的是包含语法节点信息的对象，所以你才会看到那些 type、start、end 之类的奇怪JSON字符串

第一步：修正模板里的调用方法 #

把模板中的代码改成：

<template>
  ...
  <h2>{{ $t('name') }}</h2>
  ...
</template>

如果改完仍有问题，检查配置和文件设置 #

1. 确认 locale 文件格式正确
   你的 en.json（对应英文语言包）应该是标准JSON结构，不要包含任何AST相关内容：

{
  "name": "John"
}

2. 检查 unplugin-vue-i18n 配置
   以 Vite 项目为例，在 vite.config.js 中确保插件配置能正确识别你的locale文件：

import { defineConfig } from 'vite'
import VueI18n from '@intlify/unplugin-vue-i18n/vite'
import path from 'path'

export default defineConfig({
  plugins: [
    VueI18n({
      // 根据你的项目结构调整locale文件路径
      include: path.resolve(__dirname, './src/locales/**/*.json'),
      runtimeOnly: false,
      compositionOnly: true,
      defaultSFCLang: 'json'
    })
  ]
})

3. 确认 i18n 实例初始化正确
   在 main.js 中正确注入国际化实例：

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import en from './locales/en.json'

const i18n = createI18n({
  locale: 'en', // 设置默认语言
  messages: {
    en
  }
})

const app = createApp(App)
app.use(i18n)
app.mount('#app')

（可选）Composition API 风格的写法 #

如果你的组件用了 <script setup>，可以直接用 useI18n 来获取翻译函数，更贴合 Vue3 的写法：

<template>
  <h2>{{ t('name') }}</h2>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

这样调整后应该就能正常渲染出 "John" 啦！

备注：内容来源于stack exchange，提问作者Askar