为什么我在 Typescript 中使用 Vue-cli 和 vue-cli-i18n 生成的新 vue3 项目无法开箱即用？

Question

我希望你可以帮助我。我是 vue/i18n 和其他方面的新手，很抱歉，如果响应很简单或者已经存在于其他地方，但我没有找到它......

我尝试使用 vue-cli 和 vue-cli-plugin-i18n 生成一个新项目，但生成的源代码未构建...

让我解释一下，我在打字稿中使用 vue-cli 生成了一个新的 vue 项目，就像 使用 vue-cli 时的配置一样

然后，我尝试使用命令“vue add i18n@next”将 i18n 插件添加到这个新项目中，并 在将 i18n 添加到上一个项目时选择这些选项配置

这是我的packagess.json 文件的内容

{
  "name": "my-vue-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
  },
  "dependencies": {
    "register-service-worker": "^1.7.2",
    "vue": "^3.2.13",
    "vue-i18n": "^9.1.0",
    "vue-router": "^4.0.3",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@intlify/vue-i18n-loader": "^2.1.0",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-pwa": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "typescript": "~4.5.5",
    "vue-cli-plugin-i18n": "^2.1.1"
  }
}

以及我的 i18n.ts 生成文件的内容

import { createI18n, LocaleMessages, 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`.
 * See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
 */
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]
      messages[locale] = locales(key)
    }
  })
  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()
})

但最后，当我运行 npm runserve 命令时，出现此错误

ERROR in src/i18n.ts:26:3
TS2769: No overload matches this call.
  Overload 1 of 2, '(options: I18nOptions<{ message: LocaleMessage<VueMessageType>; datetime: DateTimeFormat; number: NumberFormat; }, string, ComposerOptions<{ ...; }, ... 9 more ..., NumberFormats<...>> | VueI18nOptions<...>>, LegacyVueI18n?: any): I18n<...>', gave the following error.
    Type 'LocaleMessages<VueMessageType, string, string>' is not assignable to type '{ [x: string]: LocaleMessage<VueMessageType>; }'.
      'string' index signatures are incompatible.
        Type 'VueMessageType' is not assignable to type 'LocaleMessage<VueMessageType>'.
          Type 'string' is not assignable to type 'LocaleMessage<VueMessageType>'.
  Overload 2 of 2, '(options: I18nOptions<{ message: LocaleMessage<VueMessageType>; datetime: DateTimeFormat; number: NumberFormat; }, { messages: "en-US"; datetimeFormats: "en-US"; numberFormats: "en-US"; }, ComposerOptions<...> | VueI18nOptions<...>>, LegacyVueI18n?: any): I18n<...>', gave the following error.
    Property '"en-US"' is missing in type 'LocaleMessages<VueMessageType, string, string>' but required in type '{ "en-US": LocaleMessage<VueMessageType>; }'.
    24 |   locale: process.env.VUE_APP_I18N_LOCALE || 'en',
    25 |   fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  > 26 |   messages: loadLocaleMessages()
       |   ^^^^^^^^
    27 | })
    28 |

感谢您的时间和帮助。

节点版本 => v16.17.1 npm 版本 => 8.15.0

Answer 1

我遇到了同样的错误，我解决了它，将类型更改为错误消息所示的预期类型。

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

function loadLocaleMessages(): { [x: string]: LocaleMessages<VueMessageType> } {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages: { [x: string]: LocaleMessages<VueMessageType> } = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key).default
    }
  })
  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()
})