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

Posted 2023-02-22

【中文标题】vue + nuxt.js - 如何根据域有不同的样式？

【英文标题】：vue + nuxt.js - How to have different styles based on domain?

【发布时间】：2020-04-17 09:12:14

【问题描述】：

我有一个带有单个 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>

【问题讨论】：

你说它是一个单一的应用程序，但你如何部署？一份或多份（每个域）？

应用程序的一份副本。域指向同一个应用实例

【参考方案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>

【讨论】：

谢谢，但是如何访问插件中的“请求”对象？我喜欢将它作为一个中心功能提供，我不必在所有页面和组件中复制和粘贴