Skip to main content

v4 代码迁移：前端概述

¥v4 Code migration: Frontend overview

此前端代码迁移概述是 v4 代码迁移指南.1 的一部分。

¥This frontend code migration overview is part of the v4 code migration guide.

Strapi 的前端代码运行管理面板，可以自定义。Strapi v3 和 v4 管理面板自定义之间的主要区别在于，v3 支持文件替换，而 v4 则不支持，而是使用几个新引入的 API（请参阅 管理面板定制 文档）。

¥The frontend code of Strapi runs the admin panel, which can be customized. The main difference between Strapi v3 and v4 admin panel customization is that v3 supports file replacement where v4 does not and instead uses several newly introduced APIs (see admin panel customization documentation).

☑️ Prerequisites

确保在迁移前端之前完全完成 迁移后端。

¥Make sure to entirely migrate the backend before migrating the frontend.

将 Strapi 应用的前端迁移到 Strapi v4 取决于你的项目是否向管理面板添加了自定义功能。

¥Migrating the frontend of a Strapi application to Strapi v4 depends on whether your project added customizations to the admin panel or not.

迁移管理面板而不进行自定义​

¥Migrating the admin panel without customizations

如果管理面板未自定义，迁移过程包括以下步骤：

¥If the admin panel was not customized, the migration process consists in the following steps:

  1. 删除项目的 ./admin 文件夹。

    ¥Delete the ./admin folder of the project.

  2. 运行 yarn strapi build（或 npm run strapi build）以重建管理面板。

    ¥Run yarn strapi build (or npm run strapi build) to rebuild the admin panel.

  3. 使用 yarn develop（或 npm run develop）启动服务器以确保管理面板正常工作。

    ¥Start the server with yarn develop (or npm run develop) to make sure the admin panel is working properly.

通过自定义迁移管理面板​

¥Migrating the admin panel with customizations

如果你使用文件替换系统自定义了 Strapi v3 管理面板，请检查此自定义在 Strapi v4 中是否仍然可用。管理面板定制文档 列出了 Strapi v4 中所有可能的定制。

¥If you customized the Strapi v3 admin panel using the file replacement system, please check if this customization is still available in Strapi v4. The admin panel customization documentation lists every possible customization in Strapi v4.

如果你在 Strapi v3 中应用的某些自定义项在 Strapi v4 中不可用，建议重新添加它们的方法是分叉自定义软件包并将其安装在你的应用中，而不是相应的默认 Strapi 软件包。

¥If some of the customizations you applied in Strapi v3 are not available in Strapi v4, the recommended way to add them back is to fork the customized package and install it in your application instead of the corresponding default Strapi package.

以下具体指南还涵盖了一些专用自定义项的迁移：

¥The following specific guides also cover the migration of some dedicated customizations:

✏️ NOTES

  • Strapi v4 管理面板还可以通过使用新 管理面板 API 的插件或利用 extensions 系统进行扩展。

    ¥Strapi v4 admin panel can also be extended, either by a plugin using the new Admin Panel API or by taking advantage of the extensions system.

  • Strapi v3 和 v4 之间的另一个区别是 Strapi v4 中管理面板的配置是在特定的 ./config/admin.js 配置文件中声明的（请参阅 管理面板配置迁移.conf）。

    ¥Another difference between Strapi v3 and v4 is that the configuration of the admin panel in Strapi v4 is declared in a specific ./config/admin.js configuration file (see admin panel configuration migration.