vue.js - 从后端加载 i18n 翻译后的 vue 显示页面
问题描述
在我的应用程序中,翻译可以由管理员编辑,所以我需要从我的后端预加载它们并在我拥有的 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();
});
}
并且main.js
是:
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 初始化之前加载的,bz 在我App.vue
有一个console.log
inmounted
方法:
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
解决方案
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 应该警告丢失键...
推荐阅读
- html - 使用“.map”获取选项时如何修复选择的默认值?
- r - R data.table:引用外部分配列名的数据表列
- sql - 数据库迁移 - 旧数据库到新定义的数据库
- typescript - rxjs:地图添加字段
- arrays - 在 Azure 数据工厂中将 JSON 文件从平面数组转换为嵌套数组
- javascript - 如何防止 HTML 的默认值
- angular - 角度中的 Observable 未能订阅构造函数或 ngOnInit()
- swift - 用于多个文本字段的 XCUITest 键盘未隐藏或键盘未集中在第二个文本字段上
- windows - 在 PowerShell 中添加每月集群任务
- azure - DeviceTwinClient when invokes getTags() method returns java.lang.IllegalArgumentException