我使用 vue.js(版本 2),并且每个 vue 文件中都有一个翻译块,如下所示:
abc.vue
<i18n>
{
"fr": {
"settings": "Conf"
},
"en": {
"settings": "Configuration"
}
}
</i18n>
<template>
.... {{ $t('settings') }} ...
</template>
i18n.js
function loadLocaleMessages () {
const locales = require.context(
'../locales',
true,
/[A-Za-z0-9-_,\s]+\.json$/i
)
const messages = {}
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
}
所以,它可以工作,但我想每个 vue 文件都有一个翻译文件。
我想要 :
在“fr”目录中:
abc.json
{ “设置”:“会议” }
在“en”目录中:
abc.json
{ “设置”:“配置” }
我该怎么做?
非常感谢。
因此,您可以通过以下步骤来实现:-
为每种语言创建目录,放置每个vue组件对应的翻译文件。
修改 i18n.js 如下
import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
function loadLocaleMessages() {
const messages = {
en: {
abc: require("./assets/locales/en/abc.json"),
xyz: require("./assets/locales/en/xyz.json"),
// Add other components as needed
},
fr: {
abc: require("./assets/locales/fr/abc.json"),
xyz: require("./assets/locales/fr/xyz.json"),
// Add other components as needed
},
// Add other locales as needed
};
return messages;
}
function createI18n() {
const messages = loadLocaleMessages();
return new VueI18n({
locale: "fr", // set locale
fallbackLocale: "fr", // set fallback locale
messages, // set locale messages
});
}
导出默认createI18n;
更新main.js如下
import Vue from "vue";
import App from "./App.vue";
import createI18n from "./i18n";
const i18n = createI18n();
new Vue({
i18n,
render: (h) => h(App),
}).$mount("#app");
通过执行上述步骤,您可以实现这一目标。 这里是相同的代码沙箱。