如何在Nuxt中获取baseUrl？配置全局兼容SSR/CSR的host访问方案

刚好我之前处理过类似需求，给你一套靠谱的方案！要让所有组件都能访问到这个动态获取的host变量，同时保证每页仅加载一次、完美兼容SSR和CSR环境，最佳选择是利用Nuxt的插件系统 + 全局注入，具体操作步骤如下：

1. 创建全局baseUrl插件 #

在项目的plugins目录下新建一个文件，比如base-url.js，把你的环境判断逻辑写进去，再通过Nuxt的inject方法把变量挂载到全局：

export default ({ app, context }, inject) => {
  // 区分SSR（服务端）和CSR（客户端）环境获取host
  const host = context.req ? context.req.headers.host : window.location.origin
  // 将host注入全局，命名为$baseUrl，所有组件/页面都能直接调用
  inject('baseUrl', host)
}

2. 在Nuxt配置中注册插件 #

打开项目根目录的nuxt.config.js（Nuxt3是nuxt.config.ts），找到plugins数组，把刚才创建的插件加进去：

Nuxt 2 配置示例： #

export default {
  // 其他配置...
  plugins: [
    '~/plugins/base-url.js' // 默认在服务端和客户端都运行
  ]
}

Nuxt 3 配置示例： #

export default defineNuxtConfig({
  // 其他配置...
  plugins: [
    '~/plugins/base-url.js' // 默认全局运行在两端
  ]
})

这里不需要额外指定运行模式，因为插件默认会在服务端每个请求执行一次、客户端页面加载时执行一次，刚好满足你“每页仅加载一次”的要求。

3. 在组件/页面中全局使用 #

现在不管是在模板里还是脚本里，都能直接通过$baseUrl访问这个host变量了：

<template>
  <div class="demo">
    当前站点Base URL：{{ $baseUrl }}
  </div>
</template>

<script>
export default {
  mounted() {
    // 在脚本里通过this访问
    console.log('当前Base URL:', this.$baseUrl)
  }
}
</script>

补充说明 #

为什么选插件这种方式？

• Nuxt插件会在应用初始化阶段执行，服务端对应每个请求只跑一次，客户端对应每个页面加载只跑一次，完全符合你的性能要求；
• 通过inject注入的变量会全局挂载到所有Vue实例、组件、页面甚至Vuex Store中，不用在每个组件里重复写判断逻辑；
• 动态获取的host能适配不同部署环境（比如测试服、正式服域名不同），比静态配置的baseUrl更灵活。

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