Javascript vue+；js-如何根据域拥有不同的样式？

我有一个多域网站，有一个vue+nuxt应用程序，每个网站需要有不同的风格。有没有关于如何为一个域加载不同样式的想法或建议

我的第一个方法是在插件js中使用一个“全局”函数，但结果证明速度太慢，评估得太晚。这意味着在对类求值之前，页面几乎已完成加载。这会导致副作用，即元素首先错误地显示其大小或颜色，然后正确显示。这对于专业页面来说是令人困惑的

i、 e.插件/helper.js

const domainHelper = {
  isDomain(domain) {
    if (process.client) {
      return window.location.hostname.includes(domain);
    }
    return false;
  },

组件/模板内部

  <template>
     <div :class="$domainHelper.isDomain('aaa') ? 'aaa' : 'bbb'">
      ...
  </template>
  <style>
      div.aaa { color: red }
      div.bbb { color: blue }
  </style>

...
div.aaa{颜色：红色}
div.bbb{颜色：蓝色}

之所以出现这种情况，是因为您的组件首先在服务器上呈现-您的助手总是返回

false

，因此服务器发送并通过浏览器显示的HTML（之前Vue甚至被初始化！）总是相同的，只有在Vue接管呈现后才会更改

要修复它，您需要在服务器上以正确的样式渲染它。为此，您需要访问请求。请求在插件中提供：

~/plugins/domainDetectorPlugin.js

从“Vue”导入Vue；
导出默认值（{req}，inject）=>{
const host=process.server？req.headers.host:window.location.host；
Vue.prototype.$isDomain=string=>{
//使用前面定义的主机变量实现检测
};
};

numxt.config.js

导出默认值{
插件：['~/plugins/domainDetectorPlugin.js']
}

组成部分：

...
div.aaa{颜色：红色}
div.bbb{颜色：蓝色}

您说这是一个单一的应用程序，但如何部署？一份或多份（每个域）？应用程序的一份副本。域指向同一个应用实例谢谢，但是我如何访问插件中的“请求”对象？我喜欢将其作为一个中心功能提供，而不必在所有页面和组件之间复制和粘贴