Implemente el proyecto front-end uni-app (vue) en el sistema win local Nginx

 Proyecto móvil de Ruoyi: integró el marco de interfaz de usuario de código abierto uview,

Configure la dirección de ruta base de la interfaz de solicitud de backend:

Empaquetar y reproducir en nginx:

Después de eso, podrás utilizar felizmente este puerto. De la siguiente manera, utilícelo para señalar un nuevo proyecto de sitio web:

Sitio configurado y proxy API en nginx 

Está listo para funcionar. 

Instale una versión estable: nginx-1.24.0

Configuración de implementación:

Sitio web agregado: puerto 8083, el subdirectorio del directorio del sitio web en nginx/html: newxss

Configurar el reenvío entre dominios /apixss,

Si hay varios servidores backend, agregue una configuración entre dominios como / secondapi y escríbalos en el objeto server{} del puerto 8083.

 ubicación / secondapi {                   # La interfaz real del backend http://10086.whhkj.com/webapi                   proxy_pass http://10087.whhkj.com/webapi;

            }

nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

   
    }
     server {
        # 监听的端口号
        listen       8083;
        # 服务名称 生产环境要修改成 公网ip 如 47.105.134.120
        server_name  192.168.10.101;
        # 配置根目录的地址是以 nginx 下的 html 文件夹为根目录来查找的
        root html;
        # 配置默认的主页显示 比如 47.105.134.120:8080 显示的 index 页面
        location / {
            root html/newxss;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

         # 关键步骤，这里表示将所有的 http://192.168.7.8:8888/teamnote/api/ 开头的请求都转发到下面 proxy_pass 指定的链接中
            # http://192.168.10.101/xss/ 开头的请求都会转发到下面proxy_pass

            location /apixss {
                  # 后端的真实接口 http://10086.whhkj.com/webapi
                  proxy_pass http://10086.whhkj.com/webapi;

            }

          location /secondapi {
                  # 后端的真实接口 http://10086.whhkj.com/webapi
                  proxy_pass http://10087.whhkj.com/webapi;

            }
        }
  
}

Reinicie nginx: nginx -s reload y podrá acceder a él normalmente.

Si encuentra 404, la ruta entre dominios no coincide y 405 significa que la ruta coincide, pero la ruta es incorrecta.

Implementar en Alibaba Cloud nginx

Nginx de Alibaba Cloud Linux configura el proyecto front-end de uni-app blog-CSDN de vue_Lan.W

---

Siempre 404, 405 excluyen:

1. Hay dos nginx en el servidor, lo que puede provocar fallas entre dominios.

2. Después de cambiar la configuración muchas veces y copiar algunas configuraciones inadecuadas de Internet, la interfaz y la ruta son correctas y los resultados son 404 y 405. Luego elimine todo el nginx.conf, copie uno limpio nuevamente y luego configúrelo. de nuevo.