使用 Vue 3 + Vuetify 3 的 i18n 自定义块的语言环境消息答案

【问题标题】：Locale messages with using i18n custom block for Vue 3 + Vuetify 3使用 Vue 3 + Vuetify 3 的 i18n 自定义块的语言环境消息
【发布时间】：2022-01-03 17:43:41
【问题描述】：

我想为每个组件分别提供我的语言环境消息。我找到了example 如何为 Vue 2 做这件事，但我找不到如何为 Vue 3 和 Vuetify 3 做这件事。这就是我所做的：

package.json

  "dependencies": {
    "@mdi/font": "6.5.95",
    "core-js": "^3.8.3",
    "roboto-fontface": "*",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0",
    "vue-i18n": "^9.1.2",
    "vue-router": "^4.0.3",
    "vuetify": "npm:@vuetify/nightly@next",
    "vuex": "^4.0.0",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@kazupon/vue-i18n-loader": "^0.3.0",  <--- This one is used for Vue 2.
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@types/webfontloader": "^1.6.34",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
    "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
    "@vue/cli-plugin-router": "~5.0.0-rc.1",
    "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
    "@vue/cli-plugin-vuex": "~5.0.0-rc.1",
    "@vue/cli-service": "~5.0.0-rc.1",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "less": "^4.1.1",
    "less-loader": "7.3.0",
    "sass": "^1.38.0",
    "sass-loader": "^10.0.0",
    "typescript": "~4.1.5",
    "vue-cli-plugin-vue-i18n": "~1.0.1",
    "vue-cli-plugin-vuetify": "~2.4.5",
    "vuetify-loader": "^2.0.0-alpha.0"
  },

我的组件.vue：

<template>
  <v-card-actions>
    <v-tooltip left>
      <template v-slot:activator="{ props }">
        <v-btn v-bind="props">
          <v-icon size="25">mdi-home</v-icon>
        </v-btn>
      </template>
      <span>{{ $t('hello') }}</span>
    </v-tooltip>
  </v-card-actions>
</template>

<i18n>
{
  "en": {
    "hello": "Hello, world!"
  },
  "ru": {
    "hello": "Привет, мир"
  }
}
</i18n>

还有 main.ts：

const app = createApp(App)
installI18n(app)

const i18n = createI18n({
  locale: 'en',
  messages: {
  }
})

app
  .use(i18n)
  .use(vuetify)
  .mount('#app')

但是，当我运行我的组件时，我在工具提示中看不到 Hello, world!。任何人都可以帮助使其工作吗？

编辑：我尝试使用@intlify/vue-i18n-loader 而不是@kazupon/vue-i18n-loader，但没有帮助。这个测试项目在github上可用

【问题讨论】：

标签： javascript typescript vue.js vuejs3 vue-i18n

【解决方案1】：

除了根据@BoussadjraBrahim 的其他答案安装@intlify/vue-i18n-loader（而不是@kazupon/vue-i18n-loader）之外，在您的Vue CLI 项目中加载程序必须是configured。 your vue.config.js 中缺少该配置，因此 <i18n> 块被忽略。

添加以下配置以启用在 SFC 中处理 <i18n> 块：

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('i18n')
      .resourceQuery(/blockType=i18n/)
      .type('javascript/auto')
      .use('i18n')
      .loader('@intlify/vue-i18n-loader')
      .end()
  },
  ⋮
}

demo

【讨论】：

【解决方案2】：

您需要按照官方文档中的说明安装vue-i18n-loader：

您需要安装 vue-loader 和 vue-i18n-loader 才能使用自定义块。虽然 vue-loader (opens new window) 很可能已经在您的项目中使用，如果您正在使用单个文件组件，您必须另外安装 vue-i18n-loader (opens new window)：
npm i --save-dev @intlify/vue-i18n-loader

【讨论】：