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);若需隔离,保持默认子域名配置。
四、最佳实践建议
- 统一构建规范:制定多应用构建标准,确保
publicPath和路由配置一致。 - 自动化部署:使用CI/CD工具(如Jenkins、GitHub Actions)自动化构建和部署流程。
- 监控与日志:为不同应用配置独立日志,便于问题追踪。
- 性能优化:对共享资源(如库文件)进行CDN加速或提取为公共依赖。
五、扩展场景:微前端架构
对于超大型应用,可考虑微前端方案:
- 主应用框架:使用uni-app构建主入口,加载子应用。
- 子应用独立:各子应用独立开发、部署,通过
import-html-entry等技术动态加载。 - 通信机制:通过CustomEvent或全局状态管理实现应用间通信。
六、总结
在一个域名下部署多个uni-app应用,可通过路由配置、多入口文件、反向代理等技术实现。关键点包括:
- 统一路径配置(
publicPath、base) - 服务器路径映射(Nginx
alias/proxy_pass) - 路由模式适配(history/hash)
- 资源与Cookie隔离策略
此方案尤其适合资源有限、需要统一管理的场景,既能降低成本,又能提升维护效率。实际部署时,建议先在测试环境验证路径配置和路由跳转,再逐步推广到生产环境。