Vue3项目如何实现子域名路由替代路径参数路由？

Vue Router本身仅负责处理同域名下的路径路由规则，本身不支持直接解析子域名做路由匹配，所以需要结合DNS、反向代理和前端全局逻辑配合实现，以下是3种可行的落地方案：

方案1：泛解析+反向代理分发+前端全局提取slug（最推荐SaaS多店铺场景使用） #

• 首先在DNS服务商配置泛域名解析：将*.example.com全部解析到你的网站服务器/CDN节点IP
• 反向代理层（Nginx/Caddy/云厂商负载均衡均可）配置规则：所有*.example.com的请求全部指向Vue应用的静态资源入口，不要做跳转，保持地址栏子域名不变
• 前端在应用初始化阶段增加子域名提取逻辑，替换原有的从路由参数取slug的逻辑，示例代码如下：

// main.js中增加全局逻辑
const getShopSlug = () => {
  const hostSegments = window.location.host.split('.')
  // 过滤保留子域名，避免和官方后台、接口等服务冲突
  const reservedSubdomains = ['www', 'admin', 'api', 'dashboard']
  if (hostSegments.length >= 3 && !reservedSubdomains.includes(hostSegments[0])) {
    return hostSegments[0]
  }
  // 未匹配到有效店铺slug可跳转至官网首页或404页
  return null
}
const shopSlug = getShopSlug()
// 将slug存入Pinia/Vuex等全局状态，供全店组件、接口请求调用
if (shopSlug) {
  useShopStore().setCurrentSlug(shopSlug)
}

• 原有Vue Router的路径规则几乎不需要修改，用户侧不会感知到内部路径逻辑，仅看到子域名形式的访问地址。

方案2：路由守卫拦截适配 #

如果不想修改太多反向代理层配置，可配合Vue Router的全局守卫做逻辑适配：

• 同样先完成泛域名解析配置，所有子域名均指向Vue应用入口
• 在router/index.js的全局前置守卫中增加子域名校验、店铺数据预加载逻辑：

router.beforeEach((to, from, next) => {
  const shopSlug = getShopSlug() // 复用上文的子域名提取方法
  // 店铺相关页面校验slug有效性
  if (to.meta.requireShop && !shopSlug) {
    return next('https://example.com')
  }
  // 预加载店铺基础信息，避免组件内重复请求
  if (shopSlug && !useShopStore().currentShopInfo) {
    useShopStore().fetchShopInfo(shopSlug).then(() => next())
  } else {
    next()
  }
})

• 优势是所有逻辑都在前端可控，适配成本更低。

方案3：多实例独立部署（适合店铺数量少、定制化需求高的场景） #

如果你的平台店铺数量少，且每个店铺有独立定制的功能/样式需求，可采用该方案：

• 每个店铺独立打包Vue应用，配置对应的子域名规则
• 反向代理层根据不同的子域名，将请求指向对应店铺的静态资源目录
• 优势是店铺之间完全隔离，不会互相影响；缺点是店铺数量多的情况下运维、迭代成本极高，不适合通用SaaS场景。

注意事项 #

• 提前配置CORS规则，允许所有*.example.com的跨域请求访问后端接口
• 打包时将vite.config.js/vue.config.js中的publicPath配置为/或静态资源CDN的绝对地址，避免子域名下静态资源加载404
• 提前规划好保留子域名列表，避免和店铺slug冲突。

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