Vue i18N SAP多语言最佳实践？ [英] Vue i18N SAP multilingual best practice?

问题描述

我是VueJS的新手。我正在努力建立一个多语言支持的SAP网站。我正在使用这个帮手插件：

I'm new to VueJS. I'm trying to make a SAP website with multilingual support. I'm using this helper plugin :

Vue-I18n

基于此示例：

vue-i18n / example / locale / src / App.vue

它运作良好，但怎么能我扩展这个以使语言可用于多个组件（页面）？我是否真的需要在Vuex上使用商店？

It works good, however how can I extend this to have the language available to multiple components (pages)? Do I really need to use a store for this, from Vuex?

推荐答案

我做了以下工作，它就像一个魅力。

I did the following and it works like a charm.

main.js ：

import Vue from 'vue';
import router from '@/router';
import { store } from '@vue/store/index.js';
import i18n from '@vue/i18n.js'
import App from '@vue/components/App.vue';
Vue.config.productionTip = false;


new Vue({
    store,
    i18n,
    router,
    render: h => h(App),
}).$mount(`#app`);

@ vue / i18n.js ：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import fr from '../json/fr.json';
import en from '../json/en.json';

Vue.use(VueI18n);

let format = function(lang) {
    let messages = {};
    lang.forEach(function(message)
    {
        messages[message.key] = message.text
    })
    return messages;
}

let populateTexts = function(lang) {
    return { ui : format(lang[8]) }
}

let conf = {
    locale: 'fr',
    fallbackLocale: 'fr',
    messages : {   
        fr: populateTexts(fr),
        en: populateTexts(en)
    }
}

const i18n = new VueI18n(conf)

export default i18n

您可能没有相同的JSON，因此您不需要格式和 populateTexts 。

You probably won't have the same JSON, so you won't need format and populateTexts.

这篇关于Vue i18N SAP多语言最佳实践？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！