同一个IP不同路径下部署不同的项目_nginx 在不同路径下部署项目-优快云博客

🚩 解决方案：需要同时在 Vite 和 Nginx 中进行配置，两者缺一不可

以新项目需要在 xxx:xxx:xx:xx/apply 路径下部署为例

1️⃣ Vite 配置

作用：设置项目的基础路径（base path），让所有资源路径以 /apply 开头。

// vite.config.ts
export default defineConfig({
  base: '/apply', // 👈 核心配置项
  build: {
    outDir: 'dist',  // 需与nginx路径匹配
    assetsDir: 'assets',
    // 其他构建配置...
  }
})

关键说明：

base: '/apply' 会直接影响以下内容：

所有静态资源路径（如JS/CSS/图片）将被解析为 /apply/assets/xxx
路由系统会自动处理前端SPA的路径导航
如果缺失此配置，浏览器会尝试加载错误路径 xxx:xxx:xxx:xx/assets/xxx（导致404）

2️⃣ Nginx 配置

作用：将指定路径 /apply 映射到新项目的目录，并处理所有请求的转发。

server {
    listen 80;
    server_name xxx.xxx.xxx.xx; # 你的IP或域名

    # ▶ 现有主项目的配置（已有配置，保持不动）◀
    location / { 
        root /path/to/main-project/dist;
        try_files $uri $uri/ /index.html;
    }

    # ▶ 新增子项目配置 ◀
    # 1. 处理 /apply 路径请求
    location ^~ /apply {
        alias /path/to/apply-project/dist; # 👈 必须使用alias，不要用root
        try_files $uri $uri/ /apply/index.html; # SPA路由支持
        index index.html;

        # 声明MIME类型（防止JS/CSS被当作下载文件）
        types {
            text/html               html;
            application/javascript js;
            text/css               css;
        }
    }

    # 2. 处理新项目的静态资源（高优先级）
    location ~ ^/apply/assets/.*\.(js|css|png|svg)$ {
        alias /path/to/apply-project/dist/assets;
        expires 1y; # 静态资源长期缓存
        access_log off;
    }
}

⚡ 配置协同工作原理

阶段	Vite的作用	Nginx的作用
构建时	生成所有资源路径为 `/apply/xxx` 的形式	——
请求到达时	——	根据请求路径匹配到正确项目的dist目录
资源加载时	确保资源路径包含 `/apply` 前缀	把 `/apply/assets/xxx` 映射到正确文件路径

🔍 验证流程

步骤1：检查构建产物路径

# 项目构建后的文件结构应为：
apply-project/
└─ dist/
   ├─ assets/       # 包含带hash的js/css文件
   │    └─ index-1a2b3c.js 
   └─ index.html     # 资源路径为 <script src="/apply/assets/index-1a2b3c.js">

步骤2：测试Nginx路径映射

# 测试新项目的HTML入口
curl -I http://xxx.xxx.xxx.xx/apply 
# 应返回200 和 Content-Type: text/html

# 测试JS文件访问
curl -I http://xxx.xxx.xxx.xx/apply/assets/index-1a2b3c.js 
# 应返回200 和 Content-Type: application/javascript

步骤3：浏览器端验证（必须）

打开浏览器开发者工具，检查以下内容：

所有资源的请求路径是否以 /apply 开头
是否存在404错误，重点检查带hash的资源文件

🛠 常见问题解决表

故障现象	原因	解决方案
页面空白，控制台显示资源404	Nginx配置未正确映射 `/apply` 路径	检查alias路径是否指向新项目的dist目录
JS/CSS文件被浏览器当作下载文件	MIME类型未正确识别	增加 `types {...}` 声明块
首页可访问，但页面刷新后404	SPA路由未正确处理	确保所有location块有 `try_files $uri $uri/ /apply/index.html`
主项目资源被错误加载到新项目路径	现有项目的静态资源规则覆盖了新项目	将新项目的静态资源匹配规则放在更靠前的位置
构建后的资源路径缺少 `/apply` 前缀	Vite配置中 `base: '/apply'` 未设置或未生效	确认vite.config.ts已正确导出配置

💡 高级技巧：多项目共存优化

若需要部署多个独立项目，可用更清晰的路径结构：

# 项目A（/project-a）
location ^~ /project-a {
    alias /path/to/project-a/dist;
    try_files $uri $uri/ /project-a/index.html;
}

# 项目B（/project-b）
location ^~ /project-b {
    alias /path/to/project-b/dist;
    try_files $uri $uri/ /project-b/index.html;
}

# 静态资源统一处理
location ~ ^/(project-a|project-b)/assets/ {
    alias /path/to/$1/dist/assets; # 👈 使用变量动态匹配
    expires 1y;
}