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

Question

我有一个带有单个 vue + nuxt 应用程序的多域站点，它需要为每个站点设置不同的样式。 任何想法或建议如何为域加载不同的样式？

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

即插件/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>

Answer 1

您看到的原因是因为您的组件是在服务器 1 上呈现的 - 您的助手总是在那里返回false ，因此由服务器发送并由浏览器显示的 HTML（甚至在Vue 初始化之前！）始终相同并且仅更改在 Vue 接管渲染之后...

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

~/plugins/domainDetectorPlugin.js

import Vue from "vue";

export default ({ req }, inject) => {
  const host = process.server ? req.headers.host : window.location.host;

  Vue.prototype.$isDomain = string => {
    // implement your detection using host variable defined earlier
  };
};

nuxt.config.js

export default {
  plugins: ['~/plugins/domainDetectorPlugin.js']
}

成分：

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