Nuxt + Laravel上的多语言站点，后端有语言环境

Question

我正在Nuxt + Laravel上建立一个多语言站点。我想要一个选项来设置数据库中的语言环境并将这些语言环境共享到Nuxt前面。有可能吗？

我发现Nuxt插件nuxt-i18n看起来不错，但是在nuxt.config.js文件中设置了语言环境，并且您无法在此文件中根据api响应设置数据。

Answer 1

您可以在 nuxt-i18n

中使用延迟加载翻译

首先，为类似于以下内容的语言创建结构：

nuxt-project/
├── lang/
│   ├── en-US.js
│   ├── es-ES.js
│   ├── fr-FR.js
├── nuxt.config.js

然后设置nuxt.config配置。请注意，您需要设置lazy: true和langDir

// nuxt.config.js

['nuxt-i18n', {
  locales: [
    {
      code: 'en',
      file: 'en-US.js'
    },
    {
      code: 'es',
      file: 'es-ES.js'
    },
    {
      code: 'fr',
      file: 'fr-FR.js'
    }
  ],
  lazy: true,
  langDir: 'lang/'
}]

然后，在lang文件中，您可以调用API并返回包含翻译消息的json，如下所示：

// lang/[lang].js

export default (context) => {
  return new Promise(function (resolve) {
    //Call your API and resolve the content here
    resolve({
      //The JSON return from your API
    })
  });
}

您可以在documentation

中找到更多详细信息

Answer 2

基于这个答案：https://stackoverflow.com/a/62534495/889126

我已经这样做了

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(
    'http://127.0.0.1:8000/api/js/lang-km.json'
  ).then((result) => {
    localeMessages = result.data
  }).catch(() => {
    localeMessages = {}
  });

  return localeMessages
}

它正在运行，您可以在控制台和 NuxtJS 应用程序上显示：

备注：我响应为JSON字符串的API，可以使用任何前缀，我只是制作为：/api/js/lang-km.json（只是一个名称）