Vue如何实现多级域名
Vue 实现多级域名的方法
多级域名（如 sub.domain.com）的实现通常需要结合前端路由和后端配置。以下是几种常见方法：
基于路由前缀的区分
在 Vue Router 中可以通过动态路由或路由前缀区分不同子域名：
const router = new VueRouter({
routes: [
{ path: '/sub1/*', component: Sub1Layout }, // 对应 sub1.domain.com
{ path: '/sub2/*', component: Sub2Layout } // 对应 sub2.domain.com
]
})后端需配置 Nginx/Apache 将所有子域名请求转发到同一入口文件：
server {
server_name ~^(.*)\.domain\.com$;
location / {
root /path/to/app;
try_files $uri $uri/ /index.html;
}
}环境变量动态配置
通过环境变量区分不同子域名的 API 和配置：
// src/config.js
const domain = window.location.hostname.split('.')[0];
export const API_URL = {
sub1: 'https://api-sub1.domain.com',
sub2: 'https://api-sub2.domain.com'
}[domain] || 'https://api-default.domain.com';动态路由表生成
根据当前域名动态生成路由表：
const getRoutes = () => {
const domain = window.location.hostname;
if (domain.includes('admin.')) {
return adminRoutes;
} else {
return userRoutes;
}
}服务端渲染（SSR）方案
使用 Nuxt.js 等 SSR 框架时，可通过 req.headers.host 获取域名：
// nuxt.config.js
export default {
serverMiddleware: [
{ path: '/', handler: (req, res, next) => {
const subdomain = req.headers.host.split('.')[0];
// 根据子域名处理逻辑
}}
]
}注意事项
- 跨域问题：不同子域名的 API 需要配置 CORS
- Cookie 作用域：设置 cookie 时需指定
.domain.com顶级域名 - CDN 配置：静态资源需支持多级域名访问
- SEO 处理：不同子域名建议使用不同的 meta 标签
实际部署时还需配合 DNS 解析和服务器代理配置完成完整方案。
