Vue.js + i18n从服务器加载外部JSON并在每个组件中实现全局访问
Vue.js + i18n从服务器加载外部JSON并在每个组件中实现全局访问
提问于 2021-08-16 11:51:27
目前，我正在设法从服务器加载翻译文件，并使其在项目的每个组件中都可访问。
例如，我可以调用https://server.com/lang=de并获得那个JSON
{
"DASHBOARD_SETTINGS": "Einstellungen",
"DASHBOARD_CUSTOMERS": "Kunden",
"DASHBOARD_CAMPAIGNS": "Kampagnen",
"DASHBOARD_LOCATIONS": "Standorte",
"DASHBOARD_DISPLAYS": "Displays"
}这是我的文件结构
- router.js
- i18n_setup.js
- app.js
- 组件
- Dashboard.vue
i18n_setup.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
export const i18n = new VueI18n({
locale: 'de',
fallbackLocale: 'en'
})
const loadedLanguages = ['de']
function setI18nLanguage (lang) {
i18n.locale = lang
axios.defaults.headers.common['Accept-Language'] = lang
document.querySelector('html').setAttribute('lang', lang)
return lang
}
export function loadLanguageAsync (lang) {
if (typeof lang === 'undefined') {
lang = window.navigator.userLanguage || window.navigator.language;
lang = lang.slice(0,2);
}
if (loadedLanguages.includes(lang)) {
if (i18n.locale !== lang) setI18nLanguage(lang)
return Promise.resolve()
}
return fetch(`https://EXAMPLE.de/locales?lang=${lang}`)
.then(response => {
let msgs = response.data
loadedLanguages.push(lang)
i18n.setLocaleMessage(lang, msgs)
return setI18nLanguage(lang)
});
}router.js
...
router.beforeEach((to, from, next) => {
const lang = to.params.lang
loadLanguageAsync(lang).then(() => next())
})app.js
...
// i18n
import { i18n } from './i18n_setup'
...
const app = new Vue({
store,
i18n,
el: '#app',
components: {
App
},
router
});Dashboard.vue
import { loadLanguageAsync } from '../i18n_setup'我可以看到翻译是通过浏览器的网络选项卡加载的，但是当我试图访问一个翻译时，例如{{ $t('DASHBOARD_SETTINGS') }，我会得到警告/错误
vue-i18n无法转换键盘‘DASHBOARD_ the’的值。使用键盘的值作为默认值。
知道我错过了什么吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-16 12:02:32
fetch返回类型为响应的对象。您正在访问该对象上不存在的response.data (let msgs = response.data)
要从响应中提取数据，请使用response.json()
return fetch(`https://EXAMPLE.de/locales?lang=${lang}`)
.then(response => response.json())
.then(msgs => {
loadedLanguages.push(lang)
i18n.setLocaleMessage(lang, msgs)
return setI18nLanguage(lang)
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68802337
复制相关文章
相似问题
腾讯云开发者
