docs: correct public folder example (#3455)

website/docs/en/guide/basic/static-assets.mdx

@@ -101,27 +101,49 @@ console.log(logo); // "https://example.com/static/logo.6c12aba3.png"
 
 ## Public Folder
 
-The public folder at the project root can be used to place some static assets. These assets will not be bundled by Rsbuild.
+The public folder at the project root can be used to place some static assets. These assets will not be built by Rsbuild and can be directly referenced via URL.
 
 - When you start the dev server, these assets will be served under the root path, `/`.
-- When you perform a production build, these assets will be copied to the dist directory.
+- When you perform a production build, these assets will be copied to the [dist directory](/guide/basic/output-files).
 
 For example, you can place files such as `robots.txt`, `manifest.json`, or `favicon.ico` in the public folder.
 
-### Reference Method
+### How to reference
 
-In the HTML template, you can refer to the files in the public folder as follows. The `assetPrefix` is the URL prefix of the static assets.
+You can reference files in the `public` directory via a URL.
+
+For example, in an HTML template, the `./public/favicon.ico` file can be referenced as `/favicon.ico`.
 
 ```html title="index.html"
-<link rel="icon" href="<%= assetPrefix %>/favicon.ico" />
+<link rel="icon" href="/favicon.ico" />
 ```
 
-In JavaScript code, you can splice the URL via `process.env.ASSET_PREFIX`:
+### Notes
+
+Here are some notes on using the `public` folder:
+
+- When referencing resources in the public folder via URL, please use absolute paths instead of relative paths to ensure that the resources can be accessed correctly after deployment.
 
-```js title="index.js"
-const faviconURL = `${process.env.ASSET_PREFIX}/favicon.ico`;
+```html title="src/index.html"
+<!-- Wrong -->
+<link rel="icon" href="../public/favicon.ico" />
+
+<!-- Correct -->
+<link rel="icon" href="/favicon.ico" />
 ```
 
+- Please avoid importing files from the public directory into the source code. The correct approach is to reference them by URL. You can place static assets imported into the source code in the `/src/assets` directory.
+
+```js title="src/index.js"
+// Wrong
+import logo from '../public/logo.png';
+
+// Correct
+import logo from './assets/logo.png';
+```
+
+- During the production build, the files in public folder will be copied to the output folder (default is `dist`). Please be careful to avoid name conflicts with the output files. When files in the `public` folder have the same name as outputs, the outputs have higher priority and will overwrite the files with the same name in the `public` folder. This feature can be disabled by setting [server.publicDir.copyOnBuild](/config/server/public-dir) to `false`.
+
 ### Custom Behavior
 
 Rsbuild provides the [server.publicDir](/config/server/public-dir) option which can be used to customize the name and behavior of the public folder, as well as to disable it.
@@ -134,12 +156,6 @@ export default {
 };
 ```
 
-### Notes
-
-- Avoid importing files from the public folder into your source code, instead reference them by URL.
-- When referencing resources in the public folder via URL, please use absolute paths instead of relative paths.
-- During the production build, the files in public folder will be copied to the output folder (default is `dist`). Please be careful to avoid name conflicts with the output files. When files in the `public` folder have the same name as outputs, the outputs have higher priority and will overwrite the files with the same name in the `public` folder. This feature can be disabled by setting `server.publicDir.copyOnBuild` to false.
-
 ## Type Declaration
 
 When you import static assets in TypeScript code, TypeScript may prompt that the module is missing a type definition:

website/docs/zh/guide/basic/static-assets.mdx

@@ -101,27 +101,49 @@ console.log(logo); // "https://example.com/static/logo.6c12aba3.png"
 
 ## public 目录
 
-项目根目录下的 public 目录可以用于放置一些静态资源，这些资源不会被 Rsbuild 打包。
+项目根目录下的 public 目录可以用于放置一些静态资源，这些资源不会被 Rsbuild 构建，并且可以直接通过 URL 引用。
 
 - 当你启动开发服务器时，这些资源会被托管在 `/` 根路径下。
-- 当你执行生产模式构建时，这些资源会被拷贝到 dist 目录。
+- 当你执行生产模式构建时，这些资源会被拷贝到 [dist 目录](/guide/basic/output-files)。
 
 比如，你可以在 public 目录下放置 `robots.txt`、`manifest.json` 或 `favicon.ico` 等文件。
 
 ### 引用方式
 
-在 HTML 模板中，你可以通过以下方式来引用 public 目录下的文件，`assetPrefix` 对应静态资源的 URL 前缀。
+你可以通过 URL 来引用 public 目录下的文件。
+
+例如，在 HTML 模板中，`./public/favicon.ico` 文件可以被引用为 `/favicon.ico`。
 
 ```html title="index.html"
-<link rel="icon" href="<%= assetPrefix %>/favicon.ico" />
+<link rel="icon" href="/favicon.ico" />
 ```
 
-在 JavaScript 代码中，你可以通过 `process.env.ASSET_PREFIX` 来拼接 URL：
+### 注意事项
+
+下面是一些使用 public 目录的注意事项：
+
+- 通过 URL 引用 public 目录中的资源时，请使用绝对路径，而不是相对路径，以确保资源在部署后能够正确访问。
 
-```js title="index.js"
-const faviconURL = `${process.env.ASSET_PREFIX}/favicon.ico`;
+```html title="src/index.html"
+<!-- 错误 -->
+<link rel="icon" href="../public/favicon.ico" />
+
+<!-- 正确 -->
+<link rel="icon" href="/favicon.ico" />
 ```
 
+- 请避免在源代码中 import public 目录下的文件，正确的方式是通过 URL 引用。你可以将源代码中 import 的静态资源放在 `/src/assets` 目录下。
+
+```js title="src/index.js"
+// 错误
+import logo from '../public/logo.png';
+
+// 正确
+import logo from './assets/logo.png';
+```
+
+- 在生产模式构建过程中，public 目录中的文件将会被拷贝到构建产物目录（默认为 `dist`）下，请注意不要和产物文件出现名称冲突。当 public 下的文件和产物重名时，构建产物具有更高的优先级，会覆盖 public 下的同名文件。这个功能可以通过将 [server.publicDir.copyOnBuild](/config/server/public-dir) 设置为 `false` 来禁用。
+
 ### 自定义行为
 
 Rsbuild 提供了 [server.publicDir](/config/server/public-dir) 选项，可以用于自定义 public 目录的名称和行为，也可以用于禁用 public 目录。
@@ -134,12 +156,6 @@ export default {
 };
 ```
 
-### 注意事项
-
-- 请避免在源代码中通过 import 来引用 public 目录下的文件，正确的方式是通过 URL 引用。
-- 通过 URL 引用 public 目录中的资源时，请使用绝对路径，而不是相对路径。
-- 在生产模式构建过程中，public 目录中的文件将会被拷贝到构建产物目录（默认为 `dist`）下，请注意不要和产物文件出现名称冲突。当 public 下的文件和产物重名时，构建产物具有更高的优先级，会覆盖 public 下的同名文件。这个功能可以通过将 `server.publicDir.copyOnBuild` 设置为 false 来禁用。
-
 ## 类型声明
 
 当你在 TypeScript 代码中引用静态资源时，TypeScript 可能会提示该模块缺少类型定义：