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

Posted 2023-02-22

【中文标题】Nuxt + Laravel 上的多语言站点，带有来自后端的语言环境

【英文标题】：Multilingual site on Nuxt + Laravel with locales from backend

【发布时间】：2020-03-21 23:08:37

【问题描述】：

我正在Nuxt + Laravel 上创建一个多语言网站。我希望有一个选项可以在数据库中设置语言环境并将这些语言环境共享到Nuxt 前面。有可能吗？

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

【参考方案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找到更多详细信息

【讨论】：

缺乏示例但提供了线索，不知何故：***.com/questions/62529529/… 可能有帮助

【参考方案2】：

基于此答案：https://***.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 应用上显示：

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