如何阻止 React 使用 _Layout.cshtml 中的圖標而不是 webpack.config.js？

Question

我有一個帶有 TypeScript 的 React 應用程序，但它似乎使用 _Layout.cshtml 來顯示圖標而不是 webpack.config.js 生成 index.ZFC35FDC70D5FC69D269883A822C7A53

_Layout.cshtml 有這一行：

<link rel="shortcut icon" type="image/png" href="~/dist/favicon.ico" />

webpack.config.js：

new HtmlWebpackPlugin({
   favicon: './ClientApp/content/favicon.ico'
}),

索引.html：

<link rel="shortcut icon" href="/dist/favicon.ico">

我還沒有找到任何關於 React 如何決定使用 webpack 而不是布局的信息。 從 _Layout.cshtml 中刪除 favicon 只是將其保留為默認圖標，而不是使用我在 webpack 中定義的圖標。

我還需要禁用或更改其他內容以強制它使用 webpack 版本嗎？ 我想這樣做的原因是因為我需要根據在 React 應用程序中設置的內容顯示兩個不同的網站圖標。

Answer 1

當我 npx npx create-react-app時，我從未見過_Layout.cshtml或webpack.config.js 。 我認為不建議編輯帶有前綴_的文件。

如果您想在./ClientApp/content/favicon.ico上使用 favicon，我認為您最好將public/favicon.ico替換為它。

Answer 2

我不知道如何不使用 _Layout.cshtml，所以我只是在 React JavaScript 代碼中使用它。

首先，我從webpack.config.js和index.html中刪除了這些行。 我認為后者是從前者生成的，因此可能沒有必要將其從那里刪除。 但正如我所說，無論如何，這些代碼似乎都沒有影響任何東西。

然后我將 _Layout.cshtml 中的行更改為以下內容：

<link id="favicon" rel="shortcut icon" type="image/png" href="" />

這阻止了它最初顯示任何圖標，這很重要，因為需要兩個圖標。 它還給了我一個可以在 JavaScript 中獲取的 ID。

最后，我添加了這個 JS 代碼：

const favicon = document.getElementById("favicon");
if (useNormalFavicon) {
    favicon.setAttribute("href", "/dist/favicon_normal.ico")
} else {
    favicon.setAttribute("href", "/dist/favicon_special.ico")
}

您必須根據解決方案的設計准確地決定將該代碼放在何處。 我將它放入最低級別的 .tsx 文件之一，該文件用作大多數站點 UI 的基礎。