vue显示从后端加载i18n翻译后的页面

Question

在我的应用程序中，翻译可以由管理员编辑，所以我需要从后端预加载它们，并在我拥有的vue应用程序中初始化。因此，我发现vue i18n包具有延迟加载消息(链接(的能力。但在他们的例子中，他们已经用默认(en(消息初始化了vue，但在我的情况下，我没有预装默认消息。因此，我想在创建VueI18n的新实例时从后端加载消息。

这是i18n.js文件：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import {syncGetData} from "@/apiUtil";
import NProgress from 'nprogress'
import './sass/nprogress.scss'
Vue.use(VueI18n)

let loadedLanguages = []
export const i18n = new VueI18n({
locale: navigator.language.split('-')[0] || process.env.VUE_APP_I18N_LOCALE,
fallbackLocale: navigator.language.split('-')[0] || process.env.VUE_APP_I18N_LOCALE,
messages: loadLanguage(navigator.language.split('-')[0] || process.env.VUE_APP_I18N_LOCALE)
})
function setI18nLanguage (lang) {
i18n.locale = lang
document.querySelector('html').setAttribute('lang', lang)
return lang
}
export function loadLanguage(lang) {
// If the language was already loaded
if (loadedLanguages.includes(lang)) {
return Promise.resolve(setI18nLanguage(lang))
}
NProgress.start();
return syncGetData('/api/translations/' + lang)
.then(function(data) {
setI18nLanguage(lang)
loadedLanguages.push(lang)
return  data;
})
.catch(function (error) {
console.error(error)
}).finally(function () {
NProgress.done();
});
}

这里还有main.js(简化(：

import Vue from 'vue'
import App from './App.vue'
import {i18n} from './i18n'
new Vue({
i18n,
render: h => h(App)
}).$mount('#app')

翻译的加载工作正常，但Vue在加载之前渲染了模板，而不是实际的翻译，我看到的是翻译键。我试着使用v-cloak，但没有帮助。

因此，我想实现的是，当加载翻译的用户应该只看到加载栏(我使用的是NProgress，你可以在i18n.js中看到用法(，并且只有在加载翻译后才渲染应用程序(可能不是渲染而是初始化(。相反，我得到的是：加载栏和渲染应用程序都没有实际翻译

提前感谢！

Michal Levýasnwer之后的更新

现在，i18n.js看起来是这样的：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { syncGetData} from "@/apiUtil";
import NProgress from 'nprogress'
import './sass/nprogress.scss'
Vue.use(VueI18n)

let loadedLanguages = [];
export function initI18n() {
const lang = navigator.language.split('-')[0] || process.env.VUE_APP_I18N_LOCALE
return syncGetData('/api/translations/' + lang)
.then(function(data) {
console.log(data)
setI18nLanguage(lang)
loadedLanguages.push(lang)
return new VueI18n({
locale: lang,
fallbackLocale: lang,
messages: data
})
})
.catch(function (error) {
console.error(error)
});
}
function setI18nLanguage (lang) {
document.querySelector('html').setAttribute('lang', lang)
return lang
}
export function loadLanguage(lang) {
// If the language was already loaded
if (loadedLanguages.includes(lang)) {
return Promise.resolve(setI18nLanguage(lang))
}
NProgress.start();
return syncGetData('/api/translations/' + lang)
.then(function(data) {
setI18nLanguage(lang)
loadedLanguages.push(lang)
return  data;
})
.catch(function (error) {
console.error(error)
}).finally(function () {
NProgress.done();
});
}

CCD_ 7为

import Vue from 'vue'
import App from './App.vue'
import {initI18n} from './i18n'
import NProgress from "nprogress";
import './sass/nprogress.scss'
NProgress.start();
initI18n().then(function(i18n) {
new Vue({
i18n,
render: h => h(App)
}).$mount('#app')
}).finally(function () {
NProgress.done();
});

我可以确认，现在消息是在Vue初始化之前加载的，b-z在我的App.vue中，我在mounted方法中有一个console.log：

mounted() {
console.log(this.$i18n.messages)
}

控制台日志的输出为Object { main_title: "Calculation", tab_you: "You", tab_friend: "Your Friend",...}，之前为空对象。

但是<h2 class="title-form">{{ $t('main_title') }}</h2>仍然呈现main_title而不是Calculation

Answer 1

用类似的东西替换VueI18n初始化：

export function initI18n() {
const lang = navigator.language.split('-')[0] || process.env.VUE_APP_I18N_LOCALE

return loadLanguage(lang).then(function(data) {
return new VueI18n({
locale: lang,
fallbackLocale: lang,
messages: data
})
})
}

main.js

import Vue from 'vue'
import App from './App.vue'
import { initI18n } from './i18n'
initI18n().then(function(i18n) {
new Vue({
i18n,
render: h => h(App)
}).$mount('#app')
})

Q更新后编辑：

你的本地化格式似乎是错误的。VueI18能够同时使用多种语言，因此您的所有翻译密钥都应包含在"；语言对象"；

代替：

{ 
main_title: "Calculation", 
tab_you: "You", 
tab_friend: "Your Friend",
...
}

您的API应该返回

{ 
"en": {
main_title: "Calculation", 
tab_you: "You", 
tab_friend: "Your Friend",
...
}
}

其中"；en"；是语言标识符

检查您的浏览器控制台，我认为VueI18n应该警告丢失的密钥。。。