uni-app多应用单域名部署指南

Question

uni-app多应用部署指南：单域名高效管理方案

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

在数字化转型背景下，企业常面临多业务线并行开发的挑战。例如某电商集团需同时维护B2C商城、供应商后台、物流管理系统三个uni-app应用，若采用独立域名部署，将产生显著成本：域名注册及续费成本（年均每个域名约80元）、SSL证书费用（单域名证书年均300元，通配符证书超千元）、服务器资源浪费（每个应用需独立Nginx配置）。

通过单域名部署方案，企业可将三个应用的年度运维成本从约1500元降至300元以下，同时简化DNS管理。典型适用场景包括微服务架构的前端拆分、多租户SaaS产品的环境隔离、移动端与管理后台的统一部署。

二、技术实现路径详解

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. 监控与维护方案

建议部署以下监控指标：应用访问量统计（按子目录区分）、静态资源加载成功率、API请求错误率。可通过Prometheus+Grafana搭建监控看板，设置阈值告警。

四、常见问题解决方案

1. 路由冲突处理

当出现 Uncaught Error: Route "xxx" already exists 错误时，需检查：各应用的 pages.json 是否存在重复路由、构建时是否混淆了环境变量、Nginx配置是否正确处理路径前缀。

为实现会话隔离，建议：

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

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

3. 跨应用通信方案

可采用以下方式实现应用间通信：LocalStorage事件监听、共享WebSocket连接、URL参数传递（需加密处理）。

五、最佳实践建议

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

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