Vue-cli生成的Vue3+TypeScript+i18n项目无法运行求助

这个错误源于自动生成代码中，loadLocaleMessages返回的类型与createI18n期望的messages参数类型不兼容。TypeScript无法确认加载的JSON文件是符合LocaleMessage结构的嵌套对象，因此抛出类型不匹配报错。

解决方法 #

修改i18n.ts中的loadLocaleMessages函数，给加载的JSON内容添加类型断言，明确其为LocaleMessage<VueMessageType>类型：

import { createI18n, LocaleMessages, LocaleMessage, VueMessageType } from 'vue-i18n'

/**
 * Load locale messages
 * 
 * The loaded `JSON` locale messages is pre-compiled by `@intlify/vue-i18n-loader`, which is integrated into `vue-cli-plugin-i18n`.
 */
function loadLocaleMessages(): LocaleMessages<VueMessageType> {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages: LocaleMessages<VueMessageType> = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      // 添加类型断言，告知TypeScript加载的是符合要求的消息对象
      messages[locale] = locales(key) as LocaleMessage<VueMessageType>
    }
  })
  return messages
}

export default createI18n({
  legacy: false,
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

补充说明 #

1. 确保src/locales目录下的JSON文件为嵌套对象结构，例如en.json：

{
  "welcome": "Welcome",
  "button": {
    "submit": "Submit"
  }
}

避免使用纯字符串内容。

2. 也可尝试将vue-i18n升级至^9.2.0及以上版本，新版本类型定义更完善，可能自动兼容该场景。

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