一个域名下，不同的“域名/子路径”，访问不同前后端项目；同域名不同前缀，访问不同前后端项目；（Nginx配置、Vue代码配置）

原创

已于 2023-01-13 18:23:37 修改 · 2.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#域名 #nginx

于 2023-01-12 20:43:25 首次发布

本文详细介绍了如何在一个域名下通过不同的子路径访问不同的前后端项目，以及如何解决Vue代码中遇到的问题。配置Nginx以根据URL前缀路由请求，并调整Vue的baseUrl以解决静态文件访问问题。尽管部分问题已解决，但仍有如‘/juhe/search’导致的空白页面待解决，可能涉及Nginx的try_files配置。

一、一个域名下，不同的“域名/子路径”，访问不同前后端项目；同域名不同前缀，访问不同前后端项目；

需求描述：

一个域名，通过域名后面加不同的前缀，可以访问到不同的前后端项目；

例如：

https://www.zhifa-ai.com/ 访问项目1

https://www.zhifa-ai.com/juhe/ 访问项目2（前端代码目录与项目1的不同）

实现步骤：

1、配置Nginx

通过给网页访问链接增加不同的url前缀，来让Nginx去实现同一端口下访问不同的前后端项目。具体配置如下：

（我这里是前端两个项目各自对应后端的两个服务）

server {
    # 这里默认监听80端口，可根据项目需要自行设置需要监听的端口号
    listen 80;
    server_name 此处填写项目发布的域名或者ip地址;
 
    location / {
        root 此处填写前端项目文件路径（默认访问的前端项目一的路径）;
        index index.html index.htm;
    }

    # 重点：   
    # 这里因为每个server只能有一个root 所以在根目录默认有root之后，
    # 可以通过alias来配置其他文件路径
    # ex: http://www.xxx.com:xxx/unst/#/xxx,
    # 将/unst这个前置在页面跳转时加入url