Nuxt基于域名的动态布局？

Question

我打算使用nuxtJS（通用模式）开发白标项目。我的想法是，当用户使用差异域访问nuxtJS时，它将显示差异布局。

例如， 如果用户A使用layouts/aaa/default.vue路径上的显示布局访问www.aaa.com->

如果用户A访问www.bbb.com->具有layouts/bbb/default.vue路径上的显示布局

任何人有一个想法或示例如何处理吗？

致谢。

Answer 1

听起来像一个奇怪的设置，但是如果您确定那是您想要的；您可以设置一个中间件来检查请求的来源并返回一个可用于确定页面文件布局的值。

myMiddleware.js

export default function({ req, redirect }) {
  let host = req.get('host');
  if (host.includes('aaa')) {
    return 'aaaLayout.vue'
  } else if (host.includes('bbb') {
    return 'bbbLayout.vue'
  }
}

然后在您的页面中

import middleware from '@/middleware/myMiddleware'
...
layout: middleware

可能需要进行调整以满足您的确切需求，但类似的方法会起作用。