ant design pro 5 企业级后台前端框架：告别资源加载难题

解决 Ant Design Pro 5 中 Public 文件夹下资源不可访问的问题

在使用 Ant Design Pro 5 开发企业级后台前端应用程序时，可能会遇到这样一个问题：当将静态资源（如徽标、图标等）放置在 public 文件夹中后，在设置网站根路径并打包部署应用程序后，这些资源无法被访问。这是因为默认情况下，public 文件夹中的内容会被直接复制到 dist 的根路径下，导致资源路径发生变化，无法被正确加载。

解决方案：自定义根路径和设置 PublicPath

要解决这个问题，需要自定义根路径和设置 publicPath。

1. 自定义根路径

在项目根目录下的 .umirc.ts 文件中，找到以下代码并修改 publicPath 的值为你想要的根路径：

export default {
  // 其他配置项
  publicPath: '/my-app/',
};

2. 设置 PublicPath

在 .umirc.ts 文件中，找到以下代码并修改 publicPath 的值为你想要的路径：

export default {
  // 其他配置项
  publicPath: '/my-app/public/',
};

使用 Assets 文件夹

除了自定义根路径和设置 publicPath 之外，还可以使用 assets 文件夹来管理静态资源。在 /src 目录下创建一个 assets 文件夹，专门用于放置静态文件。这样，就不用担心 public 文件夹中的资源在打包部署后出现找不到的问题了。

示例代码

在 assets 文件夹中创建 logo.png 文件，然后在组件中使用该图像：

import logo from '../assets/logo.png';

const App = () => {
  return (
    <div>
      <img src={logo} alt="logo" />
    </div>
  );
};

结论

通过自定义根路径、设置 publicPath 或使用 assets 文件夹，可以解决 Ant Design Pro 5 中 public 文件夹下资源无法访问的问题。这三种方法各有优缺点，开发者可以根据自己的需求选择最合适的解决方案。

常见问题解答

1. 为什么 publicPath 的值应该以斜杠开头和结尾？

斜杠表示应用程序的根路径。在设置 publicPath 时，需要确保它以斜杠开头和结尾，以确保资源可以从正确的路径加载。

2. 自定义根路径后，应用程序的 URL 会发生什么变化？

自定义根路径后，应用程序的所有 URL 都会带有指定的根路径。例如，如果将根路径设置为 /my-app，则应用程序的主页 URL 将为 /my-app/。

3. assets 文件夹与 public 文件夹有什么区别？

public 文件夹中的内容会被直接复制到 dist 的根路径下，而 assets 文件夹中的内容不会被复制。这意味着，如果使用 assets 文件夹管理静态资源，则需要在组件中指定正确的路径来引用这些资源。

4. 如何在使用 CDN 时设置 publicPath？

在使用 CDN 时，需要将 publicPath 设置为 CDN 的 URL。例如，如果 CDN 的 URL 为 https://cdn.example.com/my-app，则 publicPath 的值应为 /my-app/。

5. 为什么使用 assets 文件夹而不是 public 文件夹？

使用 assets 文件夹可以使项目结构更加清晰，并且可以避免 public 文件夹中的资源在打包部署后出现找不到的问题。