我正在使用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-test中,我尝试成功输出以下内容:
<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
vue-loader
和vue-i18n-loader
的。同时,你的webpack配置文件和package.json文件也可以提供。你所加载的版本可能会有所帮助。 - Leon Vismer