前端项目部署与问题解决

晨枫阳2026-03-31 14:31

1.1 部署目标

根目录 ：/www/wwwroot/my-font-project/

项目结构：

复制代码

/www/wwwroot/my-font-project/
├── shanzhiyu/          # 项目1，通过 /szy 访问
└── test-vue-app/       # 项目2，通过 /test 访问

1.2 最终有效的 Nginx 配置

在宝塔面板"网站"中，为 47.108.252.189 添加 HTML项目，并将配置文件内容完整替换为以下内容：

bash 复制代码

server {
    listen 80;
    server_name 47.108.252.189;
    
    # shanzhiyu 项目
    location /szy {
        alias /www/wwwroot/my-font-project/shanzhiyu;
        try_files $uri $uri/ /szy/index.html;
        index index.html;
    }
    
    # test-vue-app 项目
    location /test {
        alias /www/wwwroot/my-font-project/test-vue-app;
        try_files $uri $uri/ /test/index.html;
        index index.html;
    }
    
    # 统一处理两个项目的静态资源（关键！）
    # 当请求 /assets/xxx 时，先尝试从 test-vue-app 找，再从 shanzhiyu 找
    location ~ ^/(assets|js|css|img|fonts)/ {
        root /www/wwwroot/my-font-project;
        
        # 先尝试从 test-vue-app 找
        try_files /test-vue-app/$uri 
                  /test-vue-app/$uri/ 
                  /shanzhiyu/$uri 
                  /shanzhiyu/$uri/ 
                  =404;
    }
    
    location / {
        return 404;
    }
}