Internationalization Nuxt.js+；vue-i18n+；axios:cant'；无法访问第页中的数据

我很难在i18n工作流中以NuxtJS显示数据

这里有两个文件，我肯定在配置中遗漏了一些东西：

插件>i18n.js：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import axios from 'axios'

Vue.use(VueI18n, axios)

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': axios({
        method: 'get',
        url: 'https://jsonplaceholder.typicode.com/posts'
      }).then((res) => { return { posts: res.data } }),
      'fr': 'hello'
    }
  })
}

页面>博客.vue：

<template>
  <div class="Content">
    <div class="container">
        <ul>
            <li v-for="post in posts">
                {{ $t('post.title') }}
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    posts: []
  })
}
</script>

{{$t（'post.title'）}


导出默认值{
数据：（）=>({
员额：[]
})
}

---

您能了解这个问题吗？

根据新的vue-i18n文档，您必须使用

i18n.setLocaleMessage

来实现动态区域设置。 以下是我在Nuxt的表现

~/plugins/vuex persistedstate.js

import createPersistedState from 'vuex-persistedstate';
import acceptLanguage from 'accept-language';
import * as acceptLanguageList from '~/assets/static/lang.json';
acceptLanguage.languages(acceptLanguageList);

export default async ({ app, store }) => {
  createPersistedState({
    key: 'setting',
    paths: ['local'],
  })(store);

  const lang = store.state.local.ui_lang;
  const avail = acceptLanguage.get(navigator.language);

  // wait file downloading or page will load 'no locale'
  await app.i18n.loadLocaleMessage(lang || avail, '/locales/');
};

import axios from 'axios';

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

export default ({ app }) => {
  /** 
   * silentTranslationWarn will disable warning when
   * loading locale without a preloaded locale
    */
  app.i18n = new VueI18n({ silentTranslationWarn: true });
  app.i18n.loadLocaleMessage = async (locale, path) => {
    let data = null;
    try {
      const file = await axios.get(`${path + locale}.json`);
      data = await file.data;
      app.i18n.setLocaleMessage(locale, data);
      app.i18n.locale = locale;
    } catch (e) {
      // do nothing
    }
    return data;
  };
};

/* ... */
plugins: [
    '~/plugins/i18n.js',
    { src: '~/plugins/vuex-persistedstate.js', ssr: false },
],
/* ... */

~/plugins/i18n.js

import createPersistedState from 'vuex-persistedstate';
import acceptLanguage from 'accept-language';
import * as acceptLanguageList from '~/assets/static/lang.json';
acceptLanguage.languages(acceptLanguageList);

export default async ({ app, store }) => {
  createPersistedState({
    key: 'setting',
    paths: ['local'],
  })(store);

  const lang = store.state.local.ui_lang;
  const avail = acceptLanguage.get(navigator.language);

  // wait file downloading or page will load 'no locale'
  await app.i18n.loadLocaleMessage(lang || avail, '/locales/');
};

import axios from 'axios';

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

export default ({ app }) => {
  /** 
   * silentTranslationWarn will disable warning when
   * loading locale without a preloaded locale
    */
  app.i18n = new VueI18n({ silentTranslationWarn: true });
  app.i18n.loadLocaleMessage = async (locale, path) => {
    let data = null;
    try {
      const file = await axios.get(`${path + locale}.json`);
      data = await file.data;
      app.i18n.setLocaleMessage(locale, data);
      app.i18n.locale = locale;
    } catch (e) {
      // do nothing
    }
    return data;
  };
};

/* ... */
plugins: [
    '~/plugins/i18n.js',
    { src: '~/plugins/vuex-persistedstate.js', ssr: false },
],
/* ... */

~/numxt.config.js

import createPersistedState from 'vuex-persistedstate';
import acceptLanguage from 'accept-language';
import * as acceptLanguageList from '~/assets/static/lang.json';
acceptLanguage.languages(acceptLanguageList);

export default async ({ app, store }) => {
  createPersistedState({
    key: 'setting',
    paths: ['local'],
  })(store);

  const lang = store.state.local.ui_lang;
  const avail = acceptLanguage.get(navigator.language);

  // wait file downloading or page will load 'no locale'
  await app.i18n.loadLocaleMessage(lang || avail, '/locales/');
};

import axios from 'axios';

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

export default ({ app }) => {
  /** 
   * silentTranslationWarn will disable warning when
   * loading locale without a preloaded locale
    */
  app.i18n = new VueI18n({ silentTranslationWarn: true });
  app.i18n.loadLocaleMessage = async (locale, path) => {
    let data = null;
    try {
      const file = await axios.get(`${path + locale}.json`);
      data = await file.data;
      app.i18n.setLocaleMessage(locale, data);
      app.i18n.locale = locale;
    } catch (e) {
      // do nothing
    }
    return data;
  };
};

/* ... */
plugins: [
    '~/plugins/i18n.js',
    { src: '~/plugins/vuex-persistedstate.js', ssr: false },
],
/* ... */

然后你的页面（帕格）

您可以通过以下方式动态更改您的区域设置：

this.$i18n.locale = locale;
await this.$i18n.loadLocaleMessage(locale, '/locales/');

---

我很痛苦，没有时间编辑更多内容

您是如何解决的？您仍然从本地文件加载JSON数据，而不是从HTTP URL加载数据