VueJS 中的 nginx 反向代理（空白）白屏

Question

我应用到项目vuejs页面的Nginx反向代理不显示结果或者白屏（blank）。

具有 NGINX 反向代理配置的主机节点

/etc/nginx/nginx.conf :

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

events {
worker_connections  1024;
}

http {
include       /etc/nginx/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  /var/log/nginx/access.log  main;
    
    sendfile        on;
    
    keepalive_timeout  65;
    
    include /etc/nginx/conf.d/*.conf;

}

/etc/nginx/conf.d/default.conf：

server {

    listen *:80;
    listen [::]:80;
    server_name localhost;
    
    root   /usr/share/nginx/html;
    
    # HTML
    location /sample/ {
        proxy_pass http://192.168.100.7:8080/sample/;            
    
        access_log /var/log/nginx/html_access.log;
        error_log /var/log/nginx/html_error.log;
    }
    
    # VueJS
    location /page2/ {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_set_header Referer $http_referer;
        proxy_pass http://192.168.100.7:8082/page2/;                    
        proxy_http_version 1.1;
        proxy_set_header upgrade $http_upgrade;
        proxy_set_header connection 'upgrade';
        proxy_cache_bypass $http_upgrade;
    
        access_log /var/log/nginx/vuejs_access.log;
        error_log /var/log/nginx/vuejs_error.log;
    }

}

结果：

给我一个针对上述问题的解决方案，让前端VueJS项目节点在nginx反向代理时能够显示出来。

Answer 1

有关详细文档和 github 存储库，我在这里分享给任何想要完成此事的人。

https://shorturl.at/jyJN0