前端项目中容易搞混的资源引用问题（根路径、占位符的理解）

前端项目中容易搞混的根路径问题

以此目录为例子（react项目默认创建），其他前端框架大多遵循这样的规则
对于一个前端项目来说，“/"根目录指向的就是public，所以在很多资源引用中看到/开头的就表示他要从静态资源public下访问资源，而我之前总是误解成根目录是在public和src上的那级，导致看一些代码就含含糊糊的，半知半解的直到今天。
如果你想引用src中的资源是就需要import了，比如：

// 使用 Webpack 的方式
import img from './222.jpg';

占位符的解释

%PUBLIC_URL% 是一个占位符，通常用于动态生成资源的路径。这个占位符会在构建时被替换为项目的公共 URL，这对于支持不同环境的资源路径尤其有用。
使用场景： public 目录中的资源， 在 public 目录中的资源可以使用 %PUBLIC_URL% 占位符来指定资源路径。这个占位符在项目构建时会被替换为正确的公共 URL。
示例：html

<!-- 在 public/index.html 中 --> 
<link rel="stylesheet" href="%PUBLIC_URL%/style/111.css">

在构建过程中，%PUBLIC_URL% 会被替换为应用的根 URL（例如，如果你的应用部署在 https://example.com/myapp，则 %PUBLIC_URL% 会被替换为 https://example.com/myapp）。
好处就在于：不同的环境中（开发、生产）都能正确地引用资源。