SSRモードでNuxt.jsを使用してVue.jsアプリケーションを構築しています。私のプロジェクトにはプラグインがaxiosありvue-i18nます。
nuxt.config.js ：
export default {
mode: 'universal',
// some irrelevant configs
modules: [
'@nuxtjs/axios',
'nuxt-i18n',
],
i18n: {
locales: [
{
code: 'en',
name: 'English',
file: 'en-EN.js'
},
{
code: 'de',
name: 'Deutsch',
file: 'de-DE.js'
}],
defaultLocale: 'en',
vueI18n: {
fallbackLocale: 'en',
},
lazy: true,
langDir: 'locales/',
vuex: {
moduleName: 'i18n',
syncLocale: true,
syncMessages: true,
syncRouteParams: true
},
},
/* Axios module configuration */
axios: {}
}
ご覧のとおり、i18nは遅延読み込みに設定されています。そして、メッセージはlocales/en-EN.jsとlocales/de-DE.jsファイルから取得されます。ファイルで、メッセージを提供するバックエンドAPIにリクエストを送信します。locales/en-EN.js：
export default async function (context) {
return await context.$axios.get('backend-api');
}
ただし、ページをロードすると、それ$axiosは未定義であると表示されますCannot read property 'get' of undefined。しかし、言語を切り替え始めるとすぐに、アプリケーションは翻訳を受け取ります。したがって、私の推測では、$axiosコンテキストからアクセスしようとしているサーバーは失敗しますが、クライアント（ブラウザー）では成功します。$axiosNuxtからモジュールにアクセスする正しい方法は何contextですか？
したがって、問題は、プラグインの挿入中にロケールファイルが呼び出されること（i18n）であるためaxios、アプリのコンテキストではまだ利用できないことだと思います。
だから私は回避策を見つけました：
まず、axios（nuxtモジュールに加えて）プレーンをインポートしました
npm i axios -S
次に、ロケールファイルで、エクスポート関数内にインスタンスをインポートしました。
// en-En.js
export default async function (context) {
// axios is derived directly from lib instead of context
const axios = require('axios').default;
let localeMessages = null
await axios.get(
'backend-api'
).then((result) => {
localeMessages = result.data
}).catch(() => {
localeMessages = {}
});
return localeMessages
}
これがそれを行うための有効な方法であるかどうかはまだわかりませんが、今のところは機能します
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加