WebStorm 上的 %PUBLIC_URL% 编辑器警告答案

【问题标题】：%PUBLIC_URL% editor warning on WebStormWebStorm 上的 %PUBLIC_URL% 编辑器警告
【发布时间】：2025-12-02 19:35:01
【问题描述】：

带有 create-react-app 的 WebStorm 在 /public/index.html 文件中具有标记为 %PUBLIC_URL% 的 /public 的文件夹路径。

找不到目录%PUBLIC_URL%，因为它不存在，也不应该存在。

除了使用 抑制错误之外，Webstorm 中是否有办法将目录变量（如%PUBLIC_URL%）别名为/public 的根路径，以防止开发过程中出现编辑器错误？

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
</head>

【问题讨论】：

没办法；如果您关心这些警告，并且抑制它们不是一种方法，请尝试用实际路径替换它们

标签： reactjs intellij-idea webstorm create-react-app

【解决方案1】：

这篇文章似乎对此提供了更多见解：
https://medium.com/@jenniferdobak/the-public-folder-and-favicons-in-create-react-app-8dc2cc1d492b

现在是解决看起来很时髦的 %PULIC_URL% 标记的好时机。还记得 React 提供的“逃生舱”，以防我们将资产放在公共文件夹中吗？在构建过程中，以 %PULIC_URL% 标记为前缀的资产将被识别和编译。但是，这不是最佳做法，应仅在必要时使用。

因此，在大多数情况下，您可以将 %PUBLIC_URL% 替换为 public 之类的内容，但当然，这取决于您如何构建 React 项目。

【讨论】：