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

Question

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

诸如本教程和本教程之类的教程通常展示如何基于按钮推送回调而不是通过访问env变量来更改网站图标。

关于自定义环境变量的反应文档使这看起来像是可以实现的，但我不确定如何正确访问变量env以index.html有条件地更改我的图标。

以下是我目前的尝试

<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>

Answer 1

反应具体解决方案

正如您在问题中提到的，React 有一个巧妙的功能，那就是自定义环境变量，

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

您实际上可以在 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等

通用解决方案

该解决方案假设您的开发和生产 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。如果您对此有困难，请阅读本文。window.location.href您也可以使用它来获取 URL和条件