vue.js - 同时使用 Vuetify 和 Vue-i18n 翻译
问题描述
我正在使用 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-i18n 中自定义 vuetify 的翻译,那么你不需要集成它。您可以在组件中对自己的字符串使用 vue-i18n,并lang.t
在 vuetify 选项中省略。
推荐阅读
- kubernetes - 继承的 EKS 集群,无权运行 kubectl 命令
- scala - 结合两个 EitherT,如果成功则返回第一个,否则返回第二个
- keras - 从 Keras 模型中获取两个输出
- kubernetes - Kubernetes 中的功能,但 Swarm 中没有
- cordova - 科尔多瓦应用程序中的用户数据和本地存储
- javascript - 我希望我的按钮在点击时在特定元素的 2 种样式之间切换,例如 h1,但按钮只是消失了
- vue.js - 为什么我不能在弹出窗口中立即获得 chrome.storage?
- jquery - 将 ID 或类添加到完全匹配元素中
- linux - 在 ext4 文件系统上运行时,“ls”命令的时间复杂度是多少?
- python - cuda 功能的自动内存管理