如何在生产中获取绝对 URL？

Posted 2023-03-30

技术标签:

【中文标题】如何在生产中获取绝对 URL？【英文标题】：How to get absolute URL in production? 【发布时间】：2020-12-19 12:00:56 【问题描述】：

我面临的问题是在使用getStaticPaths 和getStaticProps 时，我无法在生产版本中获取绝对URL

export async function getStaticPaths() 
  const url =
    process.env.NODE_ENV === "development"
      ? "http://localhost:3000"
      : "https://websitename.vercel.app";
  const res = await fetch(`$url/api/posts`);
  const posts = await res.json();
  console.log("posts: ", posts);

  const paths = posts.map(( slug ) => (
    params:  slug ,
  ));

  console.log("Paths: ", paths);

  return  paths, fallback: false ;


export async function getStaticProps( params ) 
  console.log("params: ", params);
  const url =
    process.env.NODE_ENV === "development"
      ? "http://localhost:3000"
      : "https://websitename.vercel.app";
  const res = await fetch(`$url/api/post`, 
    method: "POST",
    body: params.slug,
  );
  const post = await res.json();

  return 
    props:  post ,
  ;

它在开发版本中运行良好，但在生产中却失败了，因为硬编码的https://websitename.vercel.app 不是vercel 生成的。 vercel 生成的 URL 类似于 websitename-q1hdjf6c2.vercel.app。

我该如何解决这个问题？

【问题讨论】：

【参考方案1】：

你可以使用$process.env.VERCEL_URL/my/route。

检查

Vercel environment variables

【讨论】：

【参考方案2】：

不幸的是，由于静态站点构建过程是在没有实际站点运行的情况下完成的，因此无法在此处访问完整的 URL。您只能在全局 window 对象中访问客户端的完整 URL。

您还可以在 Vercel 为您的应用程序生成 URL 后设置环境变量并从那里使用它。

【讨论】：