如何配置我的 Nuxt 前端应用程序以了解使用 Strapi 的后端的 baseUrl？

Posted 2023-02-22

【中文标题】如何配置我的 Nuxt 前端应用程序以了解使用 Strapi 的后端的 baseUrl？

【英文标题】：How do I configure my Nuxt frontend application to know the baseUrl of the backend which uses Strapi?

【发布时间】：2020-04-13 02:58:43

【问题描述】：

我一直在关注这两个教程：

Deliveroo clone - Nuxt/Apollo/Strapi Blog - Nuxt/Apollo/Strapi

在reading through Strapi's documentation 和搜索网络之后，我无法弄清楚如何在前端设置我的应用程序的baseUrl，以便我所处的任何环境都会返回正确的 URL 来查询后端，例如：

制作：https://awesomesauce.com 暂存：https://staging.awesomesauce.com 质量保证：https://qa.awesomesauce.com 开发人员：http://localhost:1337

如果我处于暂存状态，则此 baseUrl 将设置为 https://staging.awesomesauce.com，依此类推。

例如，在这些教程中，您会看到他们在引用图像时会这样做 <img src="http://localhost:1337/img.jpg />，但是在生产环境中这将如何工作？

Strapi 的文档有一些关于使用server.json 的信息：

作为在 nginx 中使用此配置的示例，您的服务器将响应 https://example.com:8443 而不是 http://localhost:1337

我看到有一个config/environments/ 目录，其中包含development、production 和staging，我不知道如何从@987654340 中的前端应用程序中访问这些内容，例如strapi.currentEnvironment.baseUrl @标签或其他地方。我的应用程序结构如下：

Application
├── frontend
├── backend

我使用 Apollo 从前端到后端进行查询。

是否有某种神奇的代理事情正在发生，其中对 localhost:1337 的引用被重定向到它们各自的环境 URL？

【参考方案1】：

只需在您的 Nuxt 应用程序中使用 ENV variables 并将不同 .env 文件中的值与您的 Strapi 服务器设置保持同步......