Nuxt.js Full Static - 应用程序配置文件的存储位置答案

【问题标题】：Nuxt.js Full Static - Where to store app configuration fileNuxt.js Full Static - 应用程序配置文件的存储位置
【发布时间】：2021-11-06 22:40:34
【问题描述】：

我将 Nuxt.js 用于我的 Web 应用程序，但直到现在才使用完整的静态生成器。我的 CI/CD 管道使用静态生成的 Nuxt.js 应用程序构建并部署了一个包含 nginx 映像的 docker 映像。我现在的问题是我无法弄清楚如何使用和加载应用程序配置文件。当然，我可以在构建过程中定义所有环境变量（如API_URL），但随后我将不得不为每个环境分离图像，这将是不幸的。

我想到的方法是创建一个config.json 文件，也许让 nginx 处理它，但我如何告诉我的 Web 应用程序他应该在哪里查找设置文件？

我的猜测是，也许使用 webpack 的人已经解决了这个问题并且知道如何处理它。

【问题讨论】：

为什么不使用.env文件？
@kissu 因为生成的应用程序是完全静态的，这意味着它仅由 js、css 和 html 组成，并且仅被视为客户端
不确定您的意思。 .env 文件可以在项目生成期间完全注入变量 (yarn generate)。即使它是静态的并托管在 CDN 上，它仍将是一个通用应用程序（或至少仅 SPA）。
也许我没有把我的问题描述得很清楚。在项目生成yarn generate 之后，我已经捆绑了文件，这些文件将上传到/var/www/html 下的 nginx 服务器。该网络应用程序现在将在 example.com/webapp 下可用，并且必须访问 api example.com/api。现在不知道网络应用程序在哪个路径下提供服务（现在/webapp，可能在另一个实例上/webapp2），网络应用程序应该如何尝试访问配置文件settings.json（例如，api url 的存储位置）不知道它的路径？

标签： nginx webpack nuxt.js

【解决方案1】：

我以前曾尝试过调查。
TLDR 是您不能为 target: static 构建提供运行时变量，尤其是某些模块的制作方式。

有关此 Github 问题的更多信息：https://github.com/nuxt/nuxt.js/issues/5100
所以，是的，归结为通过 CI/CD 进行一些动态 webpack 配置，至少我的团队是这样处理的。

【讨论】：

我明白了。与您的 github 问题相关，我找到了一个开放的问题：github.com/nuxt/nuxt.js/issues/9170 我猜是这样，在运行容器化应用程序之前，我通过 bash 脚本替换 CDN 或配置文件的 URL（目前）。
@Sylnois 同样，Nuxtnation 可能宣布了一些可以绕过此类问题的好消息。欢迎在 15/16 日加入：nuxtnation.com
我参加了会议，他们甚至选择了我的问题。不幸的是，答案是“不可能”。