如何在nginx里面配置两个或者多个项目，并且解决vue项目部署后刷新访问404以及跨域问题（全网最详细）

首先本人使用的工具是docker镜像所配置的nginx（其他问题可私聊，如有错误之处请指正）

1、首先解决项目访问刷新404问题

location /xxx {
            alias /usr/share/nginx/html/xxx;
            try_files $uri $uri/ /xxx/index.html;
            index index.html index.htm;
        }

添加上方所标红的代码即可解决，主是原因的打包时使用的模式是history模式，在该模式下实际所访问的地址是端口号后面的位置，但是我们后端其实并没有该访问接口，前端的端口、ip、协议会丢失，添加上方的代码就是告诉浏览器，让它按照地址栏的地址去访问（这也是我们所希望的）

2、解决404的第二个方法

就是将打包的时候模式改为hash模式，这个时候他就会按照哈希值去寻找，而哈希值是唯一的（相对本次浏览来说），但是此时浏览器中间的地址会多一个#不够美观，可以解决不建议

 3、多项目部署跨域，以及静态文件等问题

# 设置用户和进程数
user root;
worker_processes auto;

# 全局错误日志和 PID 文件
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# 工作模式和连接数
events {
    worker_connections 1024;
}

# HTTP 配置
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    client_max_body_size 100m;
    underscores_in_headers on;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    keepalive_timeout  65;

    # 默认的服务器配置
    server {
        listen 80 ;
        server_name localhost;
        
        root /usr/share/nginx/html;
        index index.html;
        
        # 处理请求
           location / {
            root /usr/share/nginx/html;
            try_files $uri $uri/ index.html;
            index index.html index.htm;
        }
    
        location /jxc {
            alias /usr/share/nginx/html/jxc;
            try_files $uri $uri/ /jxc/index.html;
            index index.html index.htm;
        }
        
        location /wms3 {
            alias /usr/share/nginx/html/wms3;
            try_files $uri $uri/ /wms3/index.html;
            index index.html index.htm;
        }
        location /snail-job {
            alias /usr/share/nginx/html/snail-job;
            try_files $uri $uri/ /snail-job/index.html;
            index index.html index.htm;
        }
      # 反向代理配置
    
        location /jxc-prod-api/ {
            proxy_pass http://100.172.10.41:8080/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
        
        location /wms3_api/ {
            proxy_pass http://100.172.10.41:8801/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            
            # WebSocket-specific headers
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }


        # 错误页面
        error_page 404 /404.html;
        location = /404.html {
            internal;
        }
    }
}

 

 静态文件的位置根据自己的实际位置，跨域的即为红色的代码部分最后一个

 这个是将协议升级为websocket，凡是使用websocket的项目应该都需要加上，代理的地址改为自己的实际地址就好

下面这个截图是配合使用跨域问题的务必加上

以下是拓展的docker-compose.yml文件内容（防止有的小伙伴不知道）

version: '1'

services:
  nginx:
     image: nginx:latest
     container_name: nginx
     hostname: nginx
     # network_mode: "host"
     ports:  
      - 80:80
     volumes:  
      #- ./logs/:/opt/nginx/log
      - ./config/nginx.conf:/etc/nginx/nginx.conf
      # - ./config/conf.d:/etc/nginx/conf.d/
      - ./jxc:/usr/share/nginx/html/jxc
      - ./wms3:/usr/share/nginx/html/wms3
      - ./index/index.html:/usr/share/nginx/html/index.html
      - ./index/images:/usr/share/nginx/html/images
      - ./index/style.css:/usr/share/nginx/html/style.css
     tty: true
     # restart: always
     command: nginx -g "daemon off;"

 主要就是挂载的内容，将本地文件夹和容器内部文件夹相关联