vue.js - Vue3 : i18n plugin won't find localization in json file

Question

我正在尝试使用 i18n 本地化设置 vue3 应用程序。本地化应该位于 json 文件中。我通过 vue add i18n 添加了 i18n到我的项目。安装过程中提出的问题均以默认值回答，但具有旧版支持的问题除外(我的回答:否)。当我尝试使用 json 文件中的文本时，它会在控制台中告诉我 [intlify] Not found 'message' key in 'en' locale messages.本地翻译工作得很好。而且我不知道为什么它不适用于 JSON 文件中提供的翻译。

这是我的代码:

packages.json

{
  "name": "optinity-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^3.0.0-4",
    "@kyvg/vue3-notification": "^2.3.1",
    "@microsoft/signalr": "^5.0.6",
    "axios": "^0.21.1",
    "babel-plugin-transform-decorators": "^6.24.1",
    "bulma": "^0.9.2",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-i18n": "^9.1.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0",
    "vuex-module-decorators": "^1.0.1"
  },
  "devDependencies": {
    "@intlify/vue-i18n-loader": "^2.1.0",
    "@types/jest": "^24.0.19",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5",
    "vue-cli-plugin-i18n": "~2.1.1",
    "vue-jest": "^5.0.0-0"
  }
}

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()
})

ma​​in.ts

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import i18n from './i18n'

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

vue.config.js

module.exports = {
  // ... your other options
  transpileDependencies: [
    'vuex-module-decorators'
  ],

  pluginOptions: {
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableLegacy: false,
      runtimeOnly: false,
      compositionOnly: false,
      fullInstall: true
    }
  }
}

en.json

{
  "message": "hello i18n !!"
}

最后

HelloI18n.vue

<template>
  <p>{{ t('message') }}</p>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  name: 'HelloI18n',
  setup() {
    const { t } = useI18n({
      inheritLocale: true,
      useScope: 'global'
    })

    // Something todo ..

    return { t }
  }
})
</script>

<i18n>
{
  "en": {
    "hello": "Hello i18n in SFC!"
  }
}
</i18n>

如果我在 HelloI18n.vue 中切换范围到本地我可以使用 <i18n> 中提供的翻译标签。我已经在 i18n.ts 文件中添加了一个控制台日志，以检查是否找到了该文件。

我不知道为什么这不起作用。有没有人有任何想法或可以指出正确的方向？

Answer 1

主要问题是 i18n.ts 中执行 loadLocalMessages 的函数没有从 locales 文件夹中正确获取文件。

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).default
    }
  })
  return messages
}

我添加了 locales(key).default ，您可以获取从文件中获取的值。