Vue Router仅处理应用内路径路由，不支持子域名或独立域名跳转；子域名需Nginx反向代理至不同Vue项目，或单应用内通过location.host动态调整路由行为。
Vue Router 本身不处理子域名或独立域名的跳转——它只负责单个应用内的前端路由（即 URL 路径 /home、/user/123 这类）。子域名（如 admin.example.com）或独立域名（如 shop.com）的切换，是浏览器地址栏整体变更，属于跨域或跨站点行为，必须由 服务端（如 Nginx）或应用逻辑主动触发跳转，Vue Router 不参与也不感知。
但你可以结合 Vue Router 的能力，实现「按域名区分加载不同 Vue 应用」或「同一应用中响应不同域名做差异化路由行为」。下面是两种典型、实用的配置思路：
一、Nginx 按子域名反向代理到不同 Vue 项目（推荐）
这是最常见、最干净的做法：每个子域名对应一个独立打包的 Vue 项目（各自有 dist/），Nginx 根据 server_name 分发请求。
# admin.example.com → 管理后台 Vue 项目
server {
listen 80;
server_name admin.example.com;
root /var/www/admin-vue/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
# api.example.com → 另一个 Vue 项目（比如文档站）
server {
listen 80;
server_name api.example.com;
root /var/www/docs-vue/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
✅ 优点：完全隔离，无冲突，SEO 友好，可独立部署更新
⚠️ 注意：每个项目需确保 vue-router 的 base 为 '/'（默认），且构建时 publicPath 设为 '/' 或 ''
二、单个 Vue 应用内，根据当前域名动态调整路由行为
适用于轻量场景：比如一个管理平台，想让 tenant1.example.com 默认打开租户1首页，tenant2.example.com 打开租户2首页，但共用同一套代码。
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
你不需要改 vue-router 配置本身，而是在入口或路由守卫中读取 window.location.host 做判断：
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{ path: '/', redirect: () => {
const host = window.location.host
if (host.startsWith('tenant1.')) return '/tenant1/dashboard'
if (host.startsWith('tenant2.')) return '/tenant2/dashboard'
return '/login'
}
},
{ path: '/tenant1/dashboard', component: () => import('@/views/Tenant1Dashboard.vue') },
{ path: '/tenant2/dashboard', component: () => import('@/views/Tenant2Dashboard.vue') },
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
也可以在 beforeEach 守卫里统一拦截处理：
router.beforeEach((to, from, next) => {
const host = window.location.host
if (to.path === '/' && host.includes('tenant1')) {
next('/tenant1/home')
} else if (to.path === '/' && host.includes('tenant2')) {
next('/tenant2/home')
} else {
next()
}
})
✅ 适用：多租户轻量定制、A/B 测试域名、灰度发布
⚠️ 注意：所有路由路径仍需在 routes 中明确定义；不能靠域名自动注册新路由
❌ 不可行的误区
- 试图在
vue-router的path或redirect里写https://admin.example.com—— 这会触发全页面跳转，不是 Vue Router 的“路由”，而是浏览器原生跳转，会丢失 SPA 状态。 - 期望 Vue Router 自动识别并切换子域名 —— 它运行在客户端，无法控制 DNS 或 HTTP Host 头。
不复杂但容易忽略：子域名路由的本质是服务端分发 + 前端适配，Vue Router 只管“路径段”，不管“协议+域名”。把职责分清，配置就清晰了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
