How can I get the host name of a web page at server side rendering in Nuxtjs

在 Nuxt.js 中，服务器端渲染时获取网页的主机名可以通过 Nuxt 的上下文对象 context 来实现。context 对象包含了很多有用的属性，比如 req（请求对象）和 env（环境变量），这些都可以帮助我们在服务端获取当前的主机名。

示例步骤

1. 在页面或组件中使用 asyncData 或 fetch 方法

   这两个方法都提供了一个参数 context，通过这个参数你可以访问到服务端的请求对象。

   javascript
   async asyncData({ req }) {
     let host;
     if (req) {
       host = req.headers.host; // 获取到主机名 (包括端口号)
     }
     return { host };
   }

2. 在中间件中使用

   如果你需要在全局或者特定页面的中间件里面获取主机名，并据此进行一些逻辑处理，你也可以使用 context 对象。

   javascript
   export default function ({ req, redirect }) {
     const host = req.headers.host;
   
     // 例如，根据不同的主机名重定向到不同的路径
     if (host === 'example.com') {
       redirect('/special-path');
     }
   }

注意事项

• 确保仅在服务器端使用 req 对象
  req 对象只在服务器端可用。因此，你需要通过 if (process.server) 检查来确保代码只在服务器端执行，避免客户端渲染时出现错误。

• 主机名的格式
  从 req.headers.host 获取的主机名通常包括端口号（如果有的话），如 localhost:3000。如果你只需要域名，可能需要对字符串进行适当处理。

使用这些方法，你可以根据不同的主机名来调整服务器端渲染的内容，这对于SEO优化或是基于域名提供特定内容的场景非常有用。