我正在构建多语言的Nuxt Web应用程序。
使用官方documentation(Codepen link)中的示例,我不再希望使用本地JSON文件,在该文件中我的翻译被保存为可以在下面的代码中定义的工作:
messages: {
'en': require('~/locales/en.json'), # I want to get this asynchronously from an HTTP URL
'fr': require('~/locales/fr.json') # I want to get this asynchronously from an HTTP URL
}
我想知道有哪些替代方法可以通过从URL读取JSON数据来异步设置en
和fr
值?
plugins / i18n.js:
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
export default ({ app, store }) => {
// Set i18n instance on app
// This way we can use it in middleware and pages asyncData/fetch
app.i18n = new VueI18n({
locale: store.state.locale,
fallbackLocale: 'en',
messages: {
'en': require('~/locales/en.json'), # How to get this asynchronously?
'fr': require('~/locales/fr.json') # # How to get this asynchronously?
}
})
app.i18n.path = (link) => {
if (app.i18n.locale === app.i18n.fallbackLocale) {
return `/${link}`
}
return `/${app.i18n.locale}/${link}`
}
}
我尝试过的事情:
messages: {
'en': axios.get(url).then((res) => {
return res.data
} ),
'fr': require('~/locales/fr.json')
}
url
指向我的Github个人资料上托管的/locals/en.json
文件的位置。
答案 0 :(得分:4)
您可以在构造函数中直接将axios
与await
一起使用:
export default async ({ app, store }) => {
app.i18n = new VueI18n({ //construction a new VueI18n
locale: store.state.i18n.locale,
fallbackLocale: 'de',
messages: {
'de': await axios.get('http://localhost:3000/lang/de.json').then((res) => {
return res.data
}),
'en': await axios.get('http://localhost:3000/lang/en.json').then((res) => {
return res.data
})
}
})
}
答案 1 :(得分:1)
我有一个localise.biz和交叉提取的解决方案
首先将async
添加到插件plugins / i18n.js
函数中,然后将await
添加到远程翻译调用中:
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import getMessages from './localize';
Vue.use(VueI18n);
export default async ({ app, store }) => {
app.i18n = new VueI18n({
locale: store.state.locale,
fallbackLocale: 'en',
messages: {
'en': await getMessages('en'),
'fr': await getMessages('fr')
}
});
app.i18n.path = (link) => {
if (app.i18n.locale === app.i18n.fallbackLocale) return `/${link}`;
return `/${app.i18n.locale}/${link}`;
}
}
并创建新功能以获取远程翻译:
import fetch from 'cross-fetch';
const LOCALIZE_API_KEY = 'XXXXXXXXXXX';
const LOCALIZE_URL = 'https://localise.biz/api/export/locale';
const HEADERS = {
'Authorization': `Loco ${LOCALIZE_API_KEY}`
};
const getMessages = async (locale) => {
const res = await fetch(`${LOCALIZE_URL}/${locale}.json`, { headers: HEADERS });
if (res.status >= 400) throw new Error("Bad response from server");
return await res.json();
};
export default getMessages;
答案 2 :(得分:0)
这就是我的结局:
async asyncData(context){
// fetch translation for your source
var translation = await fetch('/translation')
// get locale of current page
var locale = context.app.i18n.locale
// set translation for Server Side Rendering
context.app.i18n.mergeLocaleMessage(locale, translation)
// save it for use on client side
return {translation: translation}
},
created(){
// prevent reverting back to not found after hard-loading page.
this.$i18n.mergeLocaleMessage(this.$i18n.locale, this.translation)
}