针对单个文件组件的Vue i18n翻译

Question

我正在使用laravel，目前正在尝试制作多语言页面，因此，我找到了一个名为VueI18N的用于翻译的非常整洁的插件，并通过npm安装它，然后将以下代码放入我的app.js 中，使其工作(不知何故(

//app.js
window.Vue = require('vue');
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
//tons of more components here
Vue.component('vue-test', require('./components/VueTestFileForLocalization.vue').default);
const messages = {
en: {
message: {
hello: 'Hello, {name}!'
}
},
de: {
message: {
hello: 'Guten Tag, {name}!'
}
}
};
const i18n = new VueI18n({
locale: 'de',
messages
});


const app = new Vue({
el: '#vue-app',
i18n
});

然后在我的vue测试中，我成功地输出了这个：

<template>
<div>{{ $t('message.hello', { name: 'John' }) }}</div>
</template>
<script>
export default {
data() {
return {};
},
created() {
this.$i18n.locale = 'en';
}
};
</script>

通过更改语言环境，我还可以显示其他语言。太棒了现在，我认为有这么多组件，我可能会在定义app.js中的所有本地化时遇到问题，而且它也不漂亮。所以我试着在这里查找单文件组件的文档链接，但不幸的是没有成功。我复制粘贴了代码(vue-i18n-loader默认情况下也应该由laravel安装(，并修改了webpack文件。经过研究，我得到的错误似乎很常见，但我似乎无法修复。

Value of key 'hello' is not a string!
Cannot translate the value of keypath 'hello'. Use the value of keypath as default

它只是简单地输出我在消息中指定的密钥。

你们中有人知道我可能做错了什么或忘记设置了什么吗？如有任何提示，我们将不胜感激。谢谢你抽出时间顺致敬意，Desory

Answer 1

虽然不能直接回答您的问题，但我最近发现了解决同一问题的另一种方法，即在维护翻译时工作量较小。

我把所有的翻译都放在JSON文件中，这样我就可以在Laravel后端和Vue前端之间共享相同的翻译。

我这样做的依据是：https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n

因此，根据：https://laravel.com/docs/7.x/localization#using-翻译字符串作为密钥

创建包含以下内容的资源/lang/en.json等：

{
"my_message": "This is my message in english",
...
}

我会创建包含以下内容的资源/js/i18n.js：

import Vue from "vue";
import VueI18n from "vue-i18n";
Vue.use(VueI18n);
function loadLocaleMessages() {
const locales = require.context(
"../lang",
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;
}
export default new VueI18n({
locale: process.env.VUE_APP_I18N_LOCALE || "en",
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
messages: loadLocaleMessages()
});

在app.js中导入如下：

//Localise
import i18n from "./i18n";
Vue.use(i18n);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
i18n,
el: "#app"
});

然后，您可以在带有__助手的刀片模板和带有$t(…(的Vue中使用相同的翻译

Answer 2

我遇到了同样的问题，我通过重新启动服务器解决了它。

再次运行npm Run serve。

希望它将来能帮助到别人。。

Answer 3

尝试对app.js进行以下更改，您的代码应该可以正常工作：

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import App from './components/VueTestFileForLocalization.vue';
Vue.use(VueI18n);
const messages = {
en: {
message: {
hello: 'Hello, {name}!'
}
},
de: {
message: {
hello: 'Guten Tag, {name}!'
}
}
};
const i18n = new VueI18n({
locale: 'de',
messages
});
new Vue({
i18n,
render: h => h(App)
}).$mount('#vue-app');