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。

Answer 2

虽然已经晚了： 1-在项目中使用此包时，它将适用于所有组件和页面。 2-使用商店不是必须的，但它就像数据层一样，收集所有变量和数据，使数据管理变得容易。

Vue i18N SAP多语言最佳实践？

2 个答案: