Nuxt3(TypeScript)集成@nuxtjs/i18n时模板语法错误求助

操作背景与步骤 #

使用TypeScript开发Nuxt应用，按文档指引集成@nuxtjs/i18n，操作步骤如下：

• 执行依赖安装命令：yarn add @nuxtjs/i18n
• 修改nuxt.config.ts配置：

modules: [
   '@nuxtjs/i18n'
],
i18n: {
  vueI18n: './config/i18n.config.ts' // 自定义配置路径
},

• 配置~/config/i18n.config.ts：

import en from '../lang/en.json'
import zh_CN from '../lang/zh-CN.json'
export default defineI18nConfig(() => ({
    legacy: false,
    globalInjection: true,
    locale: 'en',
    fallbackLocale: 'zh-CN',
    messages: {
        en,
        zh_CN
    }
}))

• 已准备对应语言文件zh-CN.json和en.json

出现的错误 #

• VSCode编辑器提示：Identifier expected
• 项目运行控制台报错：Pre-transform error: unknown: Unexpected token (16:40)

排查方向 #

1. 语言文件引用与配置key不匹配 #

当前i18n.config.ts中，fallbackLocale设置为'zh-CN'，但messages中的key是zh_CN，两者不匹配会导致解析异常。需修改messages配置：

messages: {
    en,
    'zh-CN': zh_CN
}

同时确认语言文件路径正确，../lang/zh-CN.json确实存在于项目中。

2. 版本兼容性问题 #

不同Nuxt版本对@nuxtjs/i18n的要求不同：

• Nuxt 3需使用@nuxtjs/i18n v8+版本
• Nuxt 2对应旧版@nuxtjs/i18n
  若版本不匹配会引发语法解析错误，可执行yarn list @nuxtjs/i18n查看当前版本，对照官方文档确认兼容性。

3. 模板语法与I18n模式冲突 #

配置中设置了legacy: false，启用Vue I18n的Composition API模式。虽然开启了globalInjection: true，但可尝试在模板中改用{{ $i18n.t('auth.login') }}测试是否能正常解析，排除$t全局注入的异常。

4. 语言文件JSON格式错误 #

控制台的Unexpected token报错可能源于语言文件的JSON语法错误，比如逗号遗漏、引号不匹配、特殊字符未转义等。检查zh-CN.json和en.json是否为有效的JSON格式。

5. TypeScript配置缺失 #

确认tsconfig.json中包含Nuxt和@nuxtjs/i18n的类型支持，比如在compilerOptions.types中添加@nuxtjs/i18n，避免TypeScript对模板语法的误报。

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