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

一、为什么需要在一个域名下部署多个uni-app应用？

在传统开发模式中，每个uni-app应用通常需要独立域名或子域名部署，这会导致服务器资源分散、管理成本增加、域名费用累积等问题。对于中小型企业或个人开发者而言，这种模式既不经济也不高效。而通过一个域名部署多个应用，可以显著降低服务器和域名成本，同时实现统一入口管理，提升用户体验。

例如，某教育公司开发了三个uni-app应用：教师端、学生端和管理端。若每个应用单独部署，需要三个域名和三套服务器配置。而通过一个域名部署，只需配置不同路径即可区分应用，既节省成本又便于维护。

二、技术实现方案

1. 基于路由的子目录部署

uni-app支持通过路由配置实现子目录部署。具体步骤如下：

1.1 配置vue.config.js

在项目根目录的 vue.config.js 中，设置 publicPath 为子目录路径：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/teacher-app/'
    : '/'
}

此配置表示生产环境下应用将部署在 /teacher-app/ 路径下。

1.2 修改manifest.json

在 manifest.json 中配置路由模式：

{
  "h5": {
    "router": {
      "mode": "history",
      "base": "/teacher-app/"
    }
  }
}

base 字段需与 publicPath 保持一致。

1.3 服务器配置（以Nginx为例）

在Nginx配置文件中添加location规则：

server {
  listen 80;
  server_name example.com;
  location /teacher-app/ {
    alias /path/to/teacher-app/dist/;
    try_files $uri $uri/ /teacher-app/index.html;
  }
}

此配置将 /teacher-app/ 路径的请求指向教师端应用的构建目录。

2. 多应用入口文件设计

对于完全独立的应用，可通过多入口文件实现：

2.1 创建入口文件

在 src 目录下创建 teacher/main.js 和 student/main.js 等入口文件。

2.2 配置pages.json

在 pages.json 中通过 condition 字段区分应用：

{
  "condition": {
    "current": 0,
    "list": [
      {
        "name": "教师端",
        "path": "teacher/pages/index/index"
      },
      {
        "name": "学生端",
        "path": "student/pages/index/index"
      }
    ]
  }
}

2.3 构建时指定入口

通过 --entry 参数指定构建入口：

npm run build -- --entry teacher/main.js

3. 反向代理与路径重写

对于更复杂的场景，可通过Nginx反向代理实现：

3.1 基础配置

server {
  listen 80;
  server_name example.com;
  location /teacher/ {
    proxy_pass http://localhost:8080/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
  location /student/ {
    proxy_pass http://localhost:8081/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

此配置将 /teacher/ 和 /student/ 路径分别代理到不同端口的服务。

3.2 路径重写

若后端服务不支持子目录，可通过 rewrite 指令调整：

location /teacher/ {
  rewrite ^/teacher/(.*)$ /$1 break;
  proxy_pass http://localhost:8080;
}

三、常见问题与解决方案

1. 静态资源路径错误

问题：部署后静态资源404。

解决：确保 publicPath 和 manifest.json 中的 base 配置一致，且服务器配置的 alias 指向正确目录。

2. 路由跳转失效

问题：应用内路由跳转返回404。

解决：检查Nginx的 try_files 配置是否包含 index.html，例如：

try_files $uri $uri/ /teacher-app/index.html;

3. Cookie作用域问题

问题：多应用间Cookie不共享。

解决：若需共享Cookie，设置 domain 为顶级域名（如 .example.com）；若需隔离，保持默认子域名配置。

四、最佳实践建议

1. 统一构建规范：制定多应用构建标准，确保 publicPath 和路由配置一致。
2. 自动化部署：使用CI/CD工具（如Jenkins、GitHub Actions）自动化构建和部署流程。
3. 监控与日志：为不同应用配置独立日志，便于问题追踪。
4. 性能优化：对共享资源（如库文件）进行 CDN 加速或提取为公共依赖。

五、扩展场景：微前端架构

对于超大型应用，可考虑微前端方案：

1. 主应用框架：使用uni-app构建主入口，加载子应用。
2. 子应用独立：各子应用独立开发、部署，通过 import-html-entry 等技术动态加载。
3. 通信机制：通过CustomEvent或全局状态管理实现应用间通信。

六、总结

在一个域名下部署多个uni-app应用，可通过路由配置、多入口文件、反向代理等技术实现。关键点包括：

• 统一路径配置（publicPath、base）
• 服务器路径映射（Nginx alias/proxy_pass）
• 路由模式适配（history/hash）
• 资源与Cookie隔离策略

此方案尤其适合资源有限、需要统一管理的场景，既能降低成本，又能提升维护效率。实际部署时，建议先在测试环境验证路径配置和路由跳转，再逐步推广到生产环境。