在 React 中根据环境（开发、阶段或产品）更改网站图标答案

【问题标题】：Change favicon based on environment (dev, stage, or prod) in React在 React 中根据环境（开发、阶段或产品）更改网站图标
【发布时间】：2022-01-20 19:23:42
【问题描述】：

我正在尝试根据环境更改网站图标，以便用户知道他们是在 dev、stage 还是 prod。

this one 和this one 等教程通常展示如何根据按钮推送回调而不是通过访问env 变量来更改网站图标。

react docs on custom env variables 让它看起来是可以实现的，但我不确定如何正确访问index.html 中的env 变量以有条件地更改我的图标。

以下是我目前的尝试

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%PUBLIC_URL%/app-icon.svg" id="favicon" />
 ...
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <script>

    //returns Uncaught ReferenceError: REACT_APP_APP_ENV is not defined
    console.log(REACT_APP_APP_ENV);
    //returns nothing
    console.log(PUBLIC_URL);
    //returns nothing
    console.log(process.REACT_APP_APP_ENV === 'dev' ? 'yep!' : 'nope!');
    //returns nothing
    console.log(process.PUBLIC_URL)

    const getFaviconEl = () => {
      return document.getElementById("favicon");
    }

    const getFaviconByEnv = (env) => {
      const favicon = getFaviconEl();
      switch (env) {
        case 'dev':
          favicon.href = "%PUBLIC_URL%/app-icon.svg"
        case 'prod':
          favicon.href = "%PUBLIC_URL%/app-icon-prod.svg"
        case 'stage':
          favicon.href = "%PUBLIC_URL%/app-icon-stage.svg"
        default:
          "%PUBLIC_URL%/app-icon.svg";
      }
    };
    getFaviconByEnv(process.REACT_APP_APP_ENV)
  </script>
  ...
</head>

【问题讨论】：

标签： html reactjs environment-variables favicon

【解决方案1】：

反应具体解决方案

正如您在问题中提到的，React 有一个简洁的功能，即Custom Environment Variables，

这些环境变量可用于根据项目的部署位置有条件地显示信息或使用版本控制之外的敏感数据。

您实际上可以在 env 文件中定义一个变量并在您的标题中引用它，如下所示：

<link rel="icon" type="image/png" href={proccess.env.REACT_APP_MY_FAVICON_URL}>

您也可以使用此方法更改网站的标题：

<title>%REACT_APP_WEBSITE_NAME%</title>

通过这种方式，您可以为不同的环境定义不同的标题，例如 env.local、env.production e.t.c

一般解决方案

此解决方案假定您的开发和生产 URL 不同

您可以使用以下逻辑：

假设这是您的网站图标标签：

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

要根据您的环境更改它，请在您的 JS 中使用它：

if (location.hostname === "localhost" 
 || location.hostname === "127.0.0.1" 
 || location.hostname.search("local") != -1) {
    $("link[rel=icon]").attr("href", "favicon_dev.png");
} else {
    $("link[rel=icon]").attr("href", "favicon.png");
}

注意：以下测试 location.hostname.search("local") != -1 匹配本地别名，如 http://mywebsite.com.local。如果您对此有疑问 - 请阅读 this。您也可以使用window.location.href 获取 URL 并以此为条件

【讨论】：

能否请您为您的 sn-p 添加一些上下文？我会把它放在哪里？另外，我开始的路径是完全不正确还是不合逻辑？
对不起，伙计！我现在正在编辑我的答案:)
我已经完全改变了它。希望有帮助

【解决方案2】：

我是这样实现的：

<head>
  <meta charset="utf-8" />
   //href left blank; will be dynamically generated based on env 
  <link rel="icon" href="" id="favicon" />
 ...
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <script>
    const getFaviconEl = () => {
      return document.getElementById("favicon");
    }
    const getFaviconByEnv = (env) => {
      const favicon = getFaviconEl();

      switch (env) {
        //icons files public directory accessed with %PUBLIC_URL% prefix
        case 'prod':
          return favicon.href = "%PUBLIC_URL%/app-icon-prod.svg";
        case 'stage':
          return favicon.href = "%PUBLIC_URL%/app-icon-stage.svg";
        default:
        return favicon.href = "%PUBLIC_URL%/app-icon-dev.svg";
      }
    };
    //defined in .env file, where, in my case, the env names are changed to 'dev', 'stage', 'prod', or 'local'
    getFaviconByEnv('%REACT_APP_SOME_ENV_VARIABLE_DEFINED_IN_.ENV%')
  </script>
 ...
</head>

【讨论】：