引言：多应用同域部署的商业价值

在微服务架构和跨平台开发趋势下，企业越来越倾向于通过单一域名整合多个业务应用。这种部署方式不仅能降低域名管理成本，还能通过共享Cookie、LocalStorage等浏览器机制提升用户体验。对于使用uni-app开发的企业而言，如何在一个域名下部署多个独立应用成为关键技术挑战。

一、技术可行性分析

1.1 HTTP协议与域名解析机制

HTTP/1.1规范允许同一域名下通过不同路径访问多个资源，这是多应用部署的理论基础。浏览器在解析域名时，会根据URL路径将请求路由到对应的应用服务。

1.2 uni-app的编译特性

uni-app通过@dcloudio/uni-app编译器将Vue组件转换为多端可运行的代码包。关键特性包括：

独立路由配置：每个应用可维护自身的pages.json
静态资源隔离：通过static目录实现资源隔离
环境变量注入：支持通过process.env区分不同应用

1.3 服务器部署模式对比

部署模式	优点	缺点
子目录部署	实现简单，成本低	路径冲突风险高
子域名部署	隔离性好	需配置多个SSL证书
反向代理部署	灵活性强，可负载均衡	配置复杂度高

二、核心实现方案

2.1 基于子目录的部署方案

2.1.1 项目结构规划

/project
  ├── app1/          # 应用1
  │   ├── static/    # 静态资源
  │   └── pages.json # 路由配置
  ├── app2/          # 应用2
  │   └── ...
  └── server.js      # 服务器配置

2.1.2 路由配置技巧

在pages.json中配置基础路径：

{
  "path": "/app1/",
  "pages": [
    {
      "path": "pages/index/index",
      "style": {...}
    }
  ]
}

2.1.3 Nginx配置示例

server {
  listen 80;
  server_name example.com;
  location /app1/ {
    alias /path/to/app1/dist/build/;
    try_files $uri $uri/ /app1/index.html;
  }
  location /app2/ {
    alias /path/to/app2/dist/build/;
    try_files $uri $uri/ /app2/index.html;
  }
}

2.2 基于反向代理的部署方案

2.2.1 架构设计

客户端 → Nginx → 应用1服务(端口3001)
               → 应用2服务(端口3002)

2.2.2 动态路由实现

使用Node.js Express示例：

const express = require('express');
const app = express();
app.use('/app1', require('./app1/server'));
app.use('/app2', require('./app2/server'));
app.listen(3000, () => {
  console.log('Proxy server running on port 3000');
});

2.2.3 会话管理策略

// 在代理层注入应用标识
app.use((req, res, next) => {
  const appId = req.path.split('/')[1]; // 获取app1/app2
  req.appId = appId;
  next();
});

三、关键问题解决方案

3.1 静态资源冲突

问题：不同应用可能包含同名静态文件
解决方案：

编译时添加哈希前缀：

// vue.config.js
module.exports = {
filenameHashing: true,
assetsDir: 'static/[name]'
}

3.2 路由跳转冲突

问题：uni.navigateTo可能跨应用跳转
解决方案：

// 封装安全跳转方法
function safeNavigate(url) {
  const currentApp = getCurrentApp(); // 获取当前应用标识
  if (!url.startsWith(`/${currentApp}/`)) {
    console.error('跨应用跳转禁止');
    return;
  }
  uni.navigateTo({ url });
}

3.3 状态管理隔离

四、性能优化实践

4.1 代码分割策略

// vue.config.js 配置
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          app1: {
            test: /[\\/]app1[\\/]/,
            name: 'app1-vendor',
            chunks: 'all'
          }
        }
      }
    }
  }
}

4.2 缓存策略设计

# Nginx缓存配置示例
location /app1/static/ {
  alias /path/to/app1/static/;
  expires 1y;
  add_header Cache-Control "public";
}

4.3 预加载实现

// 在应用入口文件预加载关键资源
if (process.env.UNI_APP === 'app1') {
  import('@/components/heavy-component').then(() => {
    console.log('预加载完成');
  });
}

五、部署自动化方案

5.1 CI/CD流水线设计

# GitLab CI示例
stages:
  - build
  - deploy
build_app1:
  stage: build
  script:
    - cd app1
    - npm install
    - npm run build
  artifacts:
    paths:
      - app1/dist
deploy_production:
  stage: deploy
  script:
    - scp -r app1/dist user@server:/var/www/example.com/app1
    - ssh user@server "systemctl restart nginx"

5.2 配置管理方案

// 动态配置加载
const config = {
  production: {
    apiBase: '/app1/api'
  },
  development: {
    apiBase: 'http://localhost:3000/app1'
  }
};
export default config[process.env.NODE_ENV];

六、安全考虑

6.1 CSRF防护

// Express中间件实现CSRF令牌
const csrf = require('csurf');
const cookieParser = require('cookie-parser');
app.use(cookieParser());
app.use(csrf({ cookie: true }));
app.get('/app1/form', (req, res) => {
  res.render('form', { csrfToken: req.csrfToken() });
});

6.2 CSP策略配置

# Nginx CSP配置
add_header Content-Security-Policy "
  default-src 'self';
  script-src 'self' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data:;
  frame-ancestors 'none';
";

七、监控与运维

7.1 日志分离方案

# Nginx日志按应用分离
http {
  log_format app1_log '$remote_addr - $request_method $uri';
  server {
    access_log /var/log/nginx/app1.access.log app1_log;
    location /app1/ { ... }
  }
}

7.2 性能监控指标

指标类别	关键指标	监控工具
前端性能	FCP、LCP、CLS	Lighthouse
服务器性能	响应时间、错误率	Prometheus + Grafana
业务指标	用户活跃度、转化率	自研BI系统

结论与展望

通过合理的架构设计和技术选型，uni-app完全支持在一个域名下部署多个独立应用。这种部署方式不仅能降低基础设施成本，还能通过资源复用提升开发效率。未来随着Web Components标准的成熟，微前端架构在uni-app中的应用将更加广泛，为企业提供更灵活的应用整合方案。

实际项目实施时，建议从简单子目录部署开始，逐步引入反向代理和微前端架构。同时要建立完善的监控体系，确保多应用环境下的稳定运行。对于大型企业，可考虑采用服务网格技术实现更精细的流量管理和服务治理。

uni-app多应用同域部署：架构设计与实现指南