一、单域名部署的核心价值与适用场景

在云计算资源成本持续攀升的背景下，单域名部署多个uni-app应用成为企业降本增效的重要手段。相较于传统多域名部署方案，单域名架构可节省50%-70%的域名注册及SSL证书费用，同时简化DNS解析配置。典型适用场景包括：

微前端架构：将大型应用拆解为多个功能模块独立部署
区域化部署：为不同地区用户提供定制化服务版本
灰度发布：通过路径区分新旧版本实现渐进式交付
多租户系统：为不同客户分配独立子路径的SaaS应用

技术实现层面，uni-app通过H5端的灵活路由机制，结合服务端配置，可完美支持路径级别的应用隔离。以某物流企业为例，其将订单系统（/order）、仓储系统（/warehouse）、配送系统（/delivery）部署在同一域名下，运维效率提升40%。

二、路由配置的深度技术实现

2.1 前端路由体系构建

uni-app的H5端路由采用Vue Router实现，关键配置位于pages.json的h5节点：

{
  "h5": {
    "router": {
      "mode": "history",
      "base": "/app1/"  // 基础路径配置
    }
  }
}

对于多应用场景，建议采用三级路由结构：域名/应用标识/功能模块。例如：

/crm/dashboard 对应CRM系统的仪表盘
/erp/inventory 对应ERP系统的库存模块

2.2 动态路由加载方案

通过webpack的output.publicPath配置实现资源动态加载：

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' 
    ? `/${process.env.APP_IDENTIFIER}/` 
    : '/'
}

配合环境变量APP_IDENTIFIER（如app1、app2），实现不同应用的资源隔离。

2.3 服务端路由重写规则

Nginx配置示例实现路径转发：

server {
  listen 80;
  server_name example.com;
  # CRM系统路由
  location /crm/ {
    alias /var/www/crm/dist/;
    try_files $uri $uri/ /crm/index.html;
  }
  # ERP系统路由
  location /erp/ {
    alias /var/www/erp/dist/;
    try_files $uri $uri/ /erp/index.html;
  }
}

Apache服务器的.htaccess配置方案：

RewriteEngine On
RewriteBase /
# CRM系统重写
RewriteRule ^crm/(.*)$ /crm/dist/$1 [L]
# ERP系统重写
RewriteRule ^erp/(.*)$ /erp/dist/$1 [L]

三、跨应用通信与状态管理

3.1 共享数据层设计

推荐采用中央化状态管理方案，通过localStorage前缀区分应用：

// 应用A的存储
const setAppAData = (key, value) => {
  localStorage.setItem(`appA_${key}`, JSON.stringify(value));
};
// 应用B的存储
const getAppBData = (key) => {
  const data = localStorage.getItem(`appB_${key}`);
  return data ? JSON.parse(data) : null;
};

3.2 跨应用事件总线

实现基于CustomEvent的跨应用通信：

// 应用A发送事件
window.dispatchEvent(new CustomEvent('appAClick', {
  detail: { userId: 123 }
}));
// 应用B监听事件
window.addEventListener('appAClick', (e) => {
  console.log('Received:', e.detail);
});

3.3 统一认证方案

采用JWT令牌共享机制，服务端验证中间件示例：

// Express中间件
app.use((req, res, next) => {
  const token = req.headers['x-auth-token'];
  if (token && validateToken(token)) {
    const payload = decodeToken(token);
    req.user = payload.user;
    next();
  } else {
    res.status(401).send('Unauthorized');
  }
});

四、性能优化与安全策略

4.1 资源预加载策略

通过link标签实现跨应用资源预加载：

<!-- 应用A的index.html -->
<link rel="preload" href="/erp/static/js/chunk-vendors.js" as="script">

4.2 CDN加速配置

七牛云CDN的路径配置示例：

源站配置：
  /crm/* -> crm-bucket
  /erp/* -> erp-bucket
缓存规则：
  /crm/static/* 缓存30天
  /erp/static/* 缓存30天

4.3 安全防护体系

CSP策略配置：

<meta http-equiv="Content-Security-Policy" 
content="default-src 'self' example.com; 
        script-src 'self' 'unsafe-inline' cdn.example.com;">

XSS防护：使用DOMPurify净化跨应用数据
CSRF防护：为每个应用生成独立token

五、部署自动化方案

5.1 CI/CD流水线设计

GitLab CI配置示例：

stages:
  - build
  - deploy
build_crm:
  stage: build
  script:
    - export APP_IDENTIFIER=crm
    - npm run build:h5
  artifacts:
    paths:
      - dist/build/h5/
deploy_crm:
  stage: deploy
  script:
    - rsync -avz dist/build/h5/ /var/www/crm/dist/
  only:
    - master

5.2 容器化部署方案

Docker Compose配置示例：

version: '3'
services:
  nginx:
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
      - ./crm/dist:/var/www/crm/dist
      - ./erp/dist:/var/www/erp/dist

六、监控与运维体系

6.1 统一日志管理

ELK Stack配置建议：

为每个应用创建独立index：logs-crm-*、logs-erp-*
文件路径区分：/var/log/crm/access.log
日志格式包含应用标识：[crm] 2023-05-20 GET /api/users

6.2 性能监控指标

关键监控项：

路由切换耗时（应用间跳转）
共享资源加载时间
跨应用API调用成功率
内存占用峰值（各应用隔离情况）

七、常见问题解决方案

7.1 路由冲突处理

静态资源路径冲突：确保publicPath配置正确
动态路由冲突：采用前缀区分（如/crm-api、/erp-api）
哈希冲突：调整webpack的hash策略

7.2 缓存污染问题

解决方案：

服务端设置Vary: Accept-Encoding头
前端添加版本号查询参数：/static/js/app.js?v=1.0.1
CDN配置缓存键规则：/crm/*和/erp/*分开缓存

7.3 跨域问题处理

Nginx配置示例：

location /api/ {
  add_header 'Access-Control-Allow-Origin' '*';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
  proxy_pass http://backend;
}

八、进阶优化方向

微前端集成：结合qiankun实现更彻底的应用隔离
服务端渲染：为SEO敏感应用提供同构方案
边缘计算：通过CDN节点实现就近部署
智能路由：基于用户设备特征动态选择应用版本

通过上述技术方案，企业可在保持域名资源集约化的同时，实现应用间的完全隔离与高效协同。实际部署数据显示，该方案可使服务器资源利用率提升60%，运维成本降低45%，特别适合中大型企业的多业务线数字化建设需求。

uni-app多应用部署指南：单域名下的高效管理策略