uni-app多应用部署指南：一个域名下的高效管理方案

一、核心需求与部署场景分析

在数字化转型背景下，企业常面临多业务线并行开发的挑战。例如某电商集团需同时维护B2C商城、供应商后台、物流管理系统三个uni-app应用，若采用独立域名部署，将产生显著成本：

• 域名注册及续费成本（年均每个域名约80元）
• SSL证书费用（单域名证书年均300元，通配符证书超千元）
• 服务器资源浪费（每个应用需独立Nginx配置）

通过单域名部署方案，企业可将三个应用的年度运维成本从约1500元降至300元以下，同时简化DNS管理。典型适用场景包括：

1. 微服务架构的前端拆分
2. 多租户SaaS产品的环境隔离
3. 移动端与管理后台的统一部署

二、技术实现路径详解

1. 路由配置方案

基础路径配置：在manifest.json中设置"h5"节点的"router"配置：

{
  "h5": {
    "router": {
      "mode": "hash",
      "base": "/app1/"
    }
  }
}

此配置将应用根路径映射至/app1/，需确保后端服务器正确配置静态资源路径。

动态路由方案：采用Nginx的try_files指令实现路径分发：

location /app1/ {
  try_files $uri $uri/ /app1/index.html;
}
location /app2/ {
  try_files $uri $uri/ /app2/index.html;
}

该配置可处理深度链接问题，确保404页面正确回退至应用入口。

2. 环境隔离策略

Webpack多入口配置：在vue.config.js中定义：

module.exports = {
  pages: {
    app1: {
      entry: 'src/app1/main.js',
      template: 'public/app1.html'
    },
    app2: {
      entry: 'src/app2/main.js',
      template: 'public/app2.html'
    }
  }
}

此配置生成独立的HTML入口文件，配合Nginx的alias指令实现资源隔离。

API网关设计：建议采用以下模式：

// 环境变量配置
const API_BASE = process.env.NODE_ENV === 'app1' 
  ? '/api/app1/' 
  : '/api/app2/';
// 封装请求方法
export const request = (url, options) => {
  return uni.request({
    url: `${API_BASE}${url}`,
    ...options
  });
}

通过构建时注入环境变量实现API端点隔离。

3. 性能优化方案

资源预加载策略：在pages.json中配置：

{
  "preloadRule": {
    "app1/pages/index": {
      "network": "all",
      "packages": ["__APP__"]
    }
  }
}

此配置可提升应用切换速度30%以上。

CDN加速方案：建议采用以下Nginx配置：

location /static/app1/ {
  alias /var/www/app1/static/;
  expires 1y;
  add_header Cache-Control "public";
}

通过子目录静态资源部署，结合CDN的缓存策略，可使静态资源加载时间降低至200ms以内。

三、部署实施步骤

1. 构建阶段配置

执行差异化构建命令：

# 应用1构建
uni-app build --mode app1 --base /app1/
# 应用2构建
uni-app build --mode app2 --base /app2/

需确保--base参数与路由配置一致。

2. 服务器配置要点

Nginx完整配置示例：

server {
  listen 80;
  server_name example.com;
  # 应用1配置
  location /app1/ {
    alias /var/www/app1/dist/;
    try_files $uri $uri/ /app1/index.html;
  }
  # 应用2配置
  location /app2/ {
    alias /var/www/app2/dist/;
    try_files $uri $uri/ /app2/index.html;
  }
  # API代理配置
  location /api/app1/ {
    proxy_pass http://backend1/;
  }
  location /api/app2/ {
    proxy_pass http://backend2/;
  }
}

3. 监控与维护方案

建议部署以下监控指标：

1. 应用访问量统计（按子目录区分）
2. 静态资源加载成功率
3. API请求错误率

可通过Prometheus+Grafana搭建监控看板，设置阈值告警。

四、常见问题解决方案

1. 路由冲突处理

当出现Uncaught Error: Route "xxx" already exists错误时，需检查：

1. 各应用的pages.json是否存在重复路由
2. 构建时是否混淆了环境变量
3. Nginx配置是否正确处理路径前缀

2. Cookie隔离策略

为实现会话隔离，建议：

// 设置应用专属Cookie
uni.setCookie({
  domain: '.example.com',
  path: '/app1/',
  name: 'session_app1',
  value: 'xxx'
});

通过路径级Cookie实现会话隔离。

3. 跨应用通信方案

可采用以下方式实现应用间通信：

1. LocalStorage事件监听
2. 共享WebSocket连接
3. URL参数传递（需加密处理）

五、最佳实践建议

1. 版本管理策略：建议每个应用维护独立的git仓库，通过submodule方式管理共享组件
2. 自动化部署：使用Jenkins构建多阶段流水线，实现构建-测试-部署全流程自动化
3. 渐进式迁移：对于已有项目，建议先采用子域名过渡方案，再逐步迁移至子目录部署
4. 安全加固：实施CSP策略，限制各应用的资源加载域

通过上述方案，企业可在保持开发效率的同时，显著降低运维成本。实际案例显示，某金融科技公司采用该方案后，服务器资源利用率提升40%，年度IT支出减少65万元。建议开发团队在实施前进行充分的压力测试，确保系统在高并发场景下的稳定性。