Vue 项目 Nginx 部署路径差异分析与部署指南

差异产生的原因

1. 构建工具差异

• 若依 Vue3 项目 ：使用 Vite 构建，配置了 base: '/admin/' 路径前缀
• UniApp 项目：默认使用相对路径引用静态资源

2. 资源引用方式不同

若依 Vue3 项目

// 构建时会在所有资源路径前添加 /admin/ 前缀
// 例如：/admin/static/js/index-xxxx.js

UniApp 项目

<!-- 使用相对路径引用资源 -->
<link rel="stylesheet" href="./assets/uni.xxxx.css" />
<script src="./static/js/app.xxxx.js"></script>

3. Nginx 路径匹配机制

当使用不同配置时，路径解析结果不同：

配置方式	请求路径	实际查找路径	结果
location /app/ { root /path; }	/assets/style.css	/path/assets/style.css	❌ 404
location / { root /path/app; }	/assets/style.css	/path/app/assets/style.css	✅ 成功

两种方式对比

方式一：子路径部署 (/app/)

location /app/ {
    root /var/www/html/black_money;
    try_files $uri $uri/ /app/index.html;
}

优点：

• URL 结构清晰，便于多项目管理
• 符合 RESTful 设计理念

缺点：

• 需要确保前端项目构建时正确配置公共资源路径
• 需要额外的 Nginx 配置处理静态资源

方式二：根路径部署 (/)

location / {
    root /var/www/html/black_money/app;
    try_files $uri $uri/ /index.html;
}

优点：

• 配置简单，兼容性好
• 适合单项目部署场景

缺点：

• 多个项目时会有路径冲突
• URL 结构不够清晰

部署建议

推荐方案：统一使用子路径部署

1. 修改 UniApp 构建配置

在 manifest.json 或构建配置中设置：

publicPath: "/app/";
// 或
baseUrl: "/app/";

2. 统一的 Nginx 配置

server {
    listen 80;
    server_name example.com;

    # 若依管理系统
    location /admin/ {
        root /var/www/html/black_money;
        try_files $uri $uri/ /admin/index.html;
    }

    # UniApp应用
    location /app/ {
        root /var/www/html/black_money;
        try_files $uri $uri/ /app/index.html;
    }

    # 静态资源统一处理
    location ~ ^/(admin|app)/.*\.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        root /var/www/html/black_money;
        expires 1y;
        add_header Cache-Control "public, immutable";
        try_files $uri =404;
    }
}

故障排查步骤

1. 检查构建配置：确认前端项目是否正确设置了公共资源路径
2. 验证文件结构：检查部署目录中的文件组织是否正确
3. 查看网络请求：使用浏览器开发者工具检查资源请求路径
4. 检查 Nginx 日志：查看 access.log 和 error.log 定位具体错误

最佳实践

1. 统一规范：团队内统一前端项目的部署路径规范
2. 自动化部署：使用 CI/CD 工具自动处理构建和部署
3. 环境隔离：不同环境使用不同的配置文件
4. 文档记录：详细记录每个项目的部署要求和特殊配置