javascript - Vue i18N SAP 多语言最佳实践？

Question

我是 VueJS 的新手。我正在尝试制作一个支持多语言的 SAP 网站。我正在使用这个辅助插件:

Vue-I18n

基于这个例子:

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

它工作得很好，但是我如何扩展它以使语言可用于多个组件(页面)？我真的需要为此使用 Vuex 的商店吗？

Answer 1

我做了以下操作，效果非常好。

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，因此您不需要 format 和 populateTexts。