同时使用 Vuetify 和 Vue-i18n 翻译答案

【问题标题】：Use both Vuetify and Vue-i18n translations同时使用 Vuetify 和 Vue-i18n 翻译
【发布时间】：2020-05-06 08:30:44
【问题描述】：

我正在使用 Vuetify 并想为按钮添加我自己的翻译，并使用 Vuetify 提供的翻译。我目前的 Vuetify 配置文件设置如下：

import Vue from "vue"
import Vuetify from "vuetify"
import "vuetify/dist/vuetify.min.css"
import "@fortawesome/fontawesome-free/css/all.css"
import VueI18n from "vue-i18n"
import messages from "./i18n"

import en from 'vuetify/es5/locale/en'
import nl from 'vuetify/es5/locale/nl'

Vue.use(Vuetify)
Vue.use(VueI18n)

const locale = navigator.language

const i18n = new VueI18n({
    locale: locale,
    messages: messages,
})

export default new Vuetify({
    theme: {
        themes: {
            light: {
                primary: "#8BC34A",
                secondary: "#627ACC"
            }
        }
    },
    icons: {
        iconfont: "fa",
    },
    lang: {
        locales: { en, nl },
        current: locale,
        t: (key, ...params) => i18n.t(key, params),
    },
});

我的locale 设置为nl，但当我将其设置为en 时，它会出现以下错误：

键 '$vuetify.noDataText' 的值不是字符串！无法翻译

keypath '$vuetify.noDataText' 的值。使用 keypath 的值默认。

但是当我将 Vuetify 翻译消息添加到我的 i18n 文件时，它可以工作：

const messages = {
    en: {
        $vuetify: {
            noDataText: 'No data available',
        },
 }

但在理想情况下，我想将 Vuetify 翻译、荷兰语自定义翻译和英语自定义翻译分开在不同的文件中。有人可以帮我找出如何分离翻译逻辑吗？

【问题讨论】：

标签： vue.js vuetify.js vue-i18n

【解决方案1】：

如果您没有在 vue-i18n 中自定义 vuetify 的翻译，那么您不需要集成它。您可以在组件中使用 vue-i18n 来处理您自己的字符串，并在 vuetify 选项中省略 lang.t。

【讨论】：

【解决方案2】：

您传递给VueI18n 构造函数的变量messages 只是一个对象，因此您可以按照您想要的方式组合它。您可以从多个文件中组合它，因此您可以在 i18n 文件中包含类似的内容：

import en from './locales/en;
import nl from './locales/nl';

export default {
  en,
  nl
}

您的locales/en.js 可能如下所示：

import $vuetify from './locales/en_vuetify';

export default {
  //Your english translations
  'foo1': 'foo1',
  // Your english vuetify translations
  $vuetify
}

你的locales/en_vuetify.js 是这样的：

import enVuetify from 'vuetify/es5/locale/en'

export default {
  // These are the default vuetify translations
  ...enVuetify,
  // Here you write your custom vuetify translations that will override the default ones
  'custom1': 'whatever'
}

并且在您的Vuetify 配置对象中，您可以像这样保留lang 属性：

lang: {
  t: (key, ...params) => i18n.t(key, params),
},

这样，只有vue-i18n 负责翻译。

【讨论】：