reactjs - 如何在 ASP.NET Core 3 React 应用程序的 index.html 中从服务器注入(inject)数据

Question

我有一个使用 dotnet new react 创建的 ASP.NET Core 3.1 React 应用程序.

我希望能够在 index.html 中嵌入一些配置值这样我就可以在 React 应用程序中使用它们。

我知道我可以添加一个 Controller 来公开这些配置值并在客户端应用程序引导期间获取它们，但如果可能的话，我想避免该请求，并且只是在服务器在第一次请求/刷新时为 index.html 提供服务时直接嵌入它。

有没有办法从 index.html 内的 ASP.NET Core 应用程序中注入(inject)一些 javascript 代码？喜欢在 this official CRA docs page 中描述?

Answer 1

这是我所做的:

在 index.html 的头部添加一个带有 ID 的脚本标签。 ID 可以是任何东西，这里我使用“appConfig”

<script type="text/javascript" id="appConfig"></script>

创建配置文件

window.configVar1 = "hello";
window.configVar2 = "world";

在 Main 函数中，在启动 Web 服务器之前:

将配置文件加载到内存中。

var clientAppConfig = File.ReadAllText(configFilePath);

使用 HtmlAgilityPack 将 index.html 加载到内存中。确保您拥有正确的 index.html 文件路径。通过 VS2019 构建使用路径“$APP_HOME/ClientApp/public/index.html”，使用 dotnet3.1 cli 构建使用“$APP_HOME/ClientApp/build/index.html”。将 $APP_HOME 替换为您应用的主目录。

var doc = new HtmlDocument();
doc.Load(indexFilePath);

使用 HtmlAgilityPack 选择脚本标签并将内部 html 替换为您的配置。

var configElement = doc.GetElementbyId("appConfig");
configElement.InnerHtml = clientAppConfig;

将更改保存到磁盘。

doc.Save(indexFilePath);

您可以在此之后放置启动网络服务器的代码，现在您的配置变量应该在全局窗口变量中可用。