如何在Nuxt/Vue应用中基于域名加载组件及传递域名信息？

嗨，这个需求其实挺常见的，我给你分享几个靠谱的解决方案，分两种思路：直接在组件里获取域名，或者把中间件里的主机名传递到组件中，你可以根据自己的项目架构选合适的：

如果你的项目是纯客户端渲染（CSR），最简单的方式就是直接在组件脚本里用浏览器的window.location.hostname拿到当前域名，不用依赖中间件传递：

<script setup>
import { computed } from 'vue';

// 直接获取当前域名
const currentDomain = window.location.hostname;

// 根据域名动态加载组件
const dynamicComponent = computed(() => {
  switch(currentDomain) {
    case 'shop.example.com':
      return import('./components/ShopComponent.vue');
    case 'blog.example.com':
      return import('./components/BlogComponent.vue');
    default:
      return import('./components/DefaultComponent.vue');
  }
});
</script>

<template>
  <component :is="dynamicComponent" />
</template>

⚠️ 注意：如果你的项目涉及服务端渲染（SSR），比如用Nuxt.js，服务端环境没有window对象，这时候就不能直接这么用，得看下面的中间件传递方案。

如果已经在中间件里拿到了主机名，想把它传递给组件，这里有几种常用的方式：

1. 全局属性注入（适合全局需要域名的场景） #

Nuxt.js 场景 #

在Nuxt的中间件文件（比如domain.middleware.ts）里，把主机名注入到全局，组件里可以直接调用：

export default defineNuxtMiddleware((context) => {
  // 区分服务端/客户端获取域名
  const hostname = process.server 
    ? context.req.headers.host?.split(':')[0] // 服务端从请求头拿
    : window.location.hostname; // 客户端从window拿

  // 注入到全局属性，组件里用$hostname访问
  context.app.config.globalProperties.$hostname = hostname;
  // 或者用provide方法，组件里通过inject获取
  context.app.provide('hostname', hostname);
});

组件里使用：

<script setup>
import { inject } from 'vue';
// 方式一：用useNuxtApp拿全局属性
const { $hostname } = useNuxtApp();
// 方式二：用inject拿provide的值
const hostname = inject('hostname');
</script>

普通Vue项目场景 #

如果是自己写的路由守卫中间件，可以把域名挂载到Vue实例的全局属性上：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
// 初始化全局属性
app.config.globalProperties.$hostname = '';

// 路由守卫中间件
router.beforeEach((to, from, next) => {
  const hostname = window.location.hostname;
  app.config.globalProperties.$hostname = hostname;
  next();
});

app.use(router).mount('#app');

组件里获取：

<script setup>
import { getCurrentInstance } from 'vue';

const instance = getCurrentInstance();
const hostname = instance?.appContext.config.globalProperties.$hostname;
</script>

2. 状态管理（Vuex/Pinia，适合复杂状态场景） #

如果你的项目已经在用状态管理库，把域名存到状态里是很稳妥的方式，中间件更新状态，组件里取状态：
以Pinia为例：

// stores/domainStore.js
import { defineStore } from 'pinia';

export const useDomainStore = defineStore('domain', {
  state: () => ({
    currentHostname: ''
  }),
  actions: {
    setHostname(hostname) {
      this.currentHostname = hostname;
    }
  }
});

中间件里更新状态：

// Nuxt中间件
import { useDomainStore } from '~/stores/domainStore';

export default defineNuxtMiddleware((context) => {
  const hostname = process.server 
    ? context.req.headers.host?.split(':')[0] 
    : window.location.hostname;
  
  const domainStore = useDomainStore();
  domainStore.setHostname(hostname);
});

组件里使用：

<script setup>
import { useDomainStore } from '@/stores/domainStore';

const domainStore = useDomainStore();
const currentDomain = domainStore.currentHostname;
</script>

3. 路由元信息传递（适合路由级别的场景） #

如果只需要在特定路由的组件里获取域名，可以把域名放到路由的meta字段里：

// 路由守卫
router.beforeEach((to, from, next) => {
  const hostname = window.location.hostname;
  // 把域名存到当前路由的meta里
  to.meta.hostname = hostname;
  next();
});

组件里获取：

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const hostname = route.meta.hostname;
</script>

内容的提问来源于stack exchange，提问作者Greg M