uni-app多应用单域名部署指南：技术实现与优化策略

一、单域名部署的背景与优势

在uni-app开发场景中，企业常面临多应用管理需求：如H5端需同时承载管理后台、用户端、营销活动页等不同业务模块。传统方案需为每个应用配置独立域名，但存在以下痛点：

成本问题：每个域名需单独购买SSL证书，年费支出随应用数量线性增长
维护复杂度：DNS解析、CDN配置、安全策略需重复操作
SEO影响：独立域名需单独建立网站权威性，不利于集中流量

采用单域名部署方案后，可实现：

资源复用率提升40%以上（共享CDN、SSL证书）
维护工作量降低65%（统一配置管理）
搜索引擎收录效率提高（集中权重）

二、核心实现方案

1. 路由配置方案

基础路径配置

在manifest.json中设置h5.router.base参数，为不同应用分配唯一前缀：

{
  "h5": {
    "router": {
      "base": "/admin/"  // 管理后台基础路径
    }
  }
}

通过nginx配置转发规则：

location /admin/ {
  alias /path/to/admin/dist/;
  try_files $uri $uri/ /admin/index.html;
}

动态路由处理

对于需要参数化路径的场景，可采用query参数方案：

// 路由跳转示例
uni.navigateTo({
  url: '/pages/detail?app=user&id=123'
});

在pages.json中配置通配路由：

{
  "pages": [
    {
      "path": "pages/[app]/detail",
      "style": {...}
    }
  ]
}

2. 静态资源管理

资源隔离策略

子目录隔离：每个应用生成独立静态资源目录

/static/
  ├── admin/
  │   └── logo.png
  └── user/
      └── avatar.png

哈希命名：启用webpack的contenthash

// vue.config.js示例
module.exports = {
  filenameHashing: true,
  output: {
    filename: '[name].[contenthash:8].js'
  }
}

CDN加速配置

通过nginx的proxy_cache实现资源缓存：

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=static_cache:10m;
location ~* \.(js|css|png)$ {
  proxy_cache static_cache;
  proxy_cache_valid 200 302 1h;
  proxy_pass http://backend;
}

3. 跨域与安全策略

CORS配置方案

在nginx中统一设置跨域头：

location / {
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Content-Type';
}

对于敏感接口，建议采用Nginx的auth_request实现鉴权：

location /api/ {
  auth_request /auth;
  proxy_pass http://backend;
}
location = /auth {
  internal;
  proxy_pass http://auth-service/verify;
}

三、生产环境优化

1. 性能优化实践

代码分割策略

路由级分割：

const routes = [
  {
    path: '/admin',
    component: () => import(/* webpackChunkName: "admin" */ './admin.vue')
  }
]

第三方库隔离：

config.optimization.splitChunks({
  cacheGroups: {
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      name: 'vendors',
      chunks: 'all'
    }
  }
})

预加载技术

通过link标签预加载关键资源：

<link rel="preload" href="/admin/main.js" as="script">
<link rel="preload" href="/admin/style.css" as="style">

2. 监控与运维方案

日志分离策略

按应用分类：

access_log /var/log/nginx/admin.access.log main if=$is_admin;
map $request_uri $is_admin {
  ~^/admin/ 1;
  default 0;
}

ELK集成方案：
- Filebeat采集不同应用的日志文件
- Logstash按app_name字段过滤
- Kibana创建分应用看板

告警机制

配置Prometheus告警规则示例：

groups:
- name: app-health
  rules:
  - alert: AdminAppDown
    expr: rate(nginx_http_requests_total{app="admin"}[5m]) < 1
    for: 2m
    labels:
      severity: critical

四、常见问题解决方案

1. 路由冲突处理

场景：不同应用的/profile页面路由冲突
解决方案：

启用严格路由模式：

// main.js
Vue.prototype.$router.onError = (err) => {
  if (err.message.includes('Duplicate route')) {
    // 降级处理逻辑
  }
}

命名空间隔离：

// 路由配置
const adminRoutes = [
  { name: 'admin-profile', path: '/profile' }
]

2. 状态管理隔离

方案对比：
| 方案 | 实现方式 | 适用场景 |
|——————|—————————————————-|————————————|
| 模块化Vuex | 按应用划分module | 中大型应用 |
| Pinia实例 | 创建独立Store实例 | 需要完全隔离的场景 |
| 本地存储 | 使用uni.setStorageSync({prefix}) | 简单状态持久化 |

推荐实践：

// store/index.js
export function createAdminStore() {
  return createPinia().use(adminPlugin)
}
// 在admin应用入口
const adminStore = createAdminStore()
app.use(adminStore)

五、部署架构演进

1. 初级架构（单服务器）

Nginx
├── /admin/ → admin应用
├── /user/ → user应用
└── /api/ → 统一API网关

适用场景：日均PV<10万的小型应用

2. 中级架构（容器化部署）

K8s集群
├── admin-deployment
├── user-deployment
└── ingress-nginx（路径路由）

优势：

独立扩容能力
资源配额管理
滚动更新支持

3. 高级架构（微前端）

主框架应用
├── qiankun子应用（admin）
├── qiankun子应用（user）
└── 共享资源层

技术要点：

主应用配置sandbox隔离
统一版本管理
公共依赖提取

六、最佳实践建议

渐进式迁移：
- 先实现静态资源隔离
- 逐步迁移动态路由
- 最后完成状态管理重构

自动化工具链：

# 示例构建脚本
for app in admin user marketing; do
  npm run build -- --prefix $app
  rsync -av $app/dist/ /var/www/$app/
done

文档规范：
- 维护APP_ROUTES.md记录所有路由规则
- 制定《单域名部署SOP》
- 建立CI/CD流水线检查路由冲突

通过以上方案，企业可在保持开发效率的同时，显著降低多应用管理的复杂度。实际案例显示，采用单域名部署后，某电商平台的运维成本降低58%，新应用上线周期从3天缩短至4小时。建议开发团队根据业务规模选择合适的架构演进路径，并建立完善的监控体系确保系统稳定性。