从自定义 .js 文件访问应用程序上下文以获取语言环境消息

Question

我正在 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 时失败，但在客户端（浏览器）上它成功了。从 Nuxt context 访问 $axios 模块的正确方法是什么？

Answer 1

所以我猜问题是在插件注入期间调用了语言环境文件 (i18n)，因此 axios 在应用上下文中尚不可用。

所以我找到了解决方法：

首先，我导入了 plain 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
}

仍然不确定这是否是一种有效的方法，但目前它有效

从自定义 .js 文件访问应用程序上下文以获取语言环境消息

Accessing app context from custom .js files for fetching locale messages

vue.js

axios

nuxt.js

vue-i18n

nuxt-i18n