Nginx 部署 Vue 打包项目，将dist目录上传至ngnix中的目录中，遇到的问题

Nginx 部署 Vue 打包项目，将dist目录上传至ngnix中的目录中，遇到的问题

需要指向下面的 @router 否则会出现 Vue 的路由在 Nginx 中刷新出现 404

server {
        listen       8099;
        server_name  localhost;
        
        location / {
            root   atjk/dist/;
            index  index.html index.htm;
            try_files $uri $uri/ @router;
            index index.html;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        location @router {
            #因此需要rewrite到index,html中，然后交给路由再处理请求资源
            rewrite ^.*$ /index.html last;
        }
        location /api/ {
            proxy_pass http://127.0.0.1:8089/;
        }
    }

#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  abc.cn;
        
        location / {
            root   atjk-vue/;
            index  index.html index.htm;
            try_files $uri $uri/ @router;
            index index.html;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        location @router {
            #因此需要rewrite到index,html中，然后交给路由再处理请求资源
            rewrite ^.*$ /index.html last;
        }
        location /api/ {
            proxy_pass http://127.0.0.1:8089/;
        }
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

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


    # HTTPS server
    #
    
    server {
        listen 80;
        server_name www.abc.cn;
        #将请求转成https
        rewrite ^(.*)$ https://$host$1 permanent;
    }
        
  
    server {
        listen       443 ssl;
        server_name  www.abc.cn;

        ssl_certificate      cert/abc.cn.pem;
        ssl_certificate_key  cert/abc.cn.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        location / {
            root   atjk-vue/;
            index  index.html index.htm;
            try_files $uri $uri/ @router;
            index index.html;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        location @router {
            #因此需要rewrite到index,html中，然后交给路由再处理请求资源
            rewrite ^.*$ /index.html last;
        }
        #  location /api/ 这个后面有斜杠，proxy_pass http://127.0.0.1:8089/; 这个后面有斜杠，实际请求会去掉/api
        # 测试url:http://127.0.0.1:8089/api/abc
        # 实际访问：http://127.0.0.1:8089/abc
        location /api/ {
            proxy_pass http://127.0.0.1:8089/;
        }

		# 大屏配置
		#  location /blade-visual这个后面没有斜杠，proxy_pass http://127.0.0.1:8050; 这个后面没有斜杠，实际请求会拼接/blade-visual
        # 测试url:http://127.0.0.1:8050/blade-visual/abc
        # 实际访问：http://127.0.0.1:8050/blade-visual/abc
        location /blade-visual {
			proxy_pass http://127.0.0.1:8050;
		}
    }

}