reactjs - 部署使用 Vercel 或 Nextjs 重写配置的项目后找不到 Assets 路径

Question

我有以下结构将一个域用于多个项目:

1. 包含单个 vercel.json 文件的 repo，用于配置其他项目的路径
2. 包含家庭应用示例的代码库
3. 包含结帐应用程序示例的代码库

vercel.json 工作得很好，部署在 nizen.com.br 中，它是这样的:

// vercel.json
{
  "rewrites": [
    {
      "source": "/checkout",
      "destination": "https://checkout.nizen.com.br/checkout"
    },
    {
      "source": "/",
      "destination": "https://home.nizen.com.br"
    }
  ]
}

因此，如果我们转到 nizen.com.br，我们会得到没有样式的家庭应用程序示例，并且在控制台中出现一堆错误，试图在 nizen.com.br 中获取 home.nizen.com.br 的 Assets ，同样碰巧结帐应用程序。

这是 Home 应用程序控制台中出现的类似错误之一:

这是结帐应用程序:

关于应用程序的 next.config.js 文件，只有 Home 应用程序保持不变，Checkout 应用程序有一个 basePath 添加了值“/checkout”，如下所示:

// Checkout app next.config.js
module.exports = {
  reactStrictMode: true,
  basePath: "/checkout",
};

我已经尝试使用 Next rewrites希望能解决问题，但没有用。

// example of rewrite that I did
module.exports = {
  async rewrites() {
    return [
      {
        source: "/",
        destination: "https://home.nizen.com.br",
      },
    ];
  },
};

我尝试在源和目标中传递 :path* 和 :path，并使用 fallback 甚至将目标更改为 checkout应用程序查看是否有变化，但没有任何效果。

如果我到达 https://home.nizen.com.br该应用程序运行完美，与结帐相同。我做错了什么？

Answer 1

我已经解决了这个问题改变策略。我没有使用带有 vercel.json 的 repo 来路由微前端，而是使用 home 应用程序作为托管在 nizen.com.br 中的项目，它的 next.config.js 文件是让魔法发生的那个文件!

//Home App next.config.js file
module.exports = {
  reactStrictMode: true,
  async rewrites() {
    return {
      fallback: [
        {
          source: "/checkout",
          destination: "https://checkout.nizen.com.br/checkout",
        },
        {
          source: "/checkout/:path*",
          destination: "https://checkout.nizen.com.br/checkout/:path*",
        },
      ],
    };
  },
};

源和目标都必须指向相同的子路径(/checkout)并且两个回退 block 都是必需的。在我写这篇文章时，我正在使用 Next version 12。