Vue.js如何实现HTML5 History 模式下的nginx部署

最新推荐文章于 2024-08-07 14:52:30 发布

apicescn

最新推荐文章于 2024-08-07 14:52:30 发布

阅读量922

点赞数

分类专栏： Spring Cloud 文章标签： Vue在Nginx环境下的部署

本文链接：https://blog.csdn.net/apicescn/article/details/101446218

版权

Spring Cloud 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

目前前端越来越多的采用Vue来进行开发，而Vue设计之初就是为了方便前后端分离操作，当vue采用 History 模式如果仅以静态文件方式部署是不支持刷新操作的，会报404异常问题，官方有详细说明，具体请参见：https://router.vuejs.org/zh/guide/essentials/history-mode.html.

对于此的解决办法官方也给出了说明，但过于简单，在实际部署中还可能存在较多的问题，故而将在实际项目中的解决办法予以发布，仅其参考。

具体Nginx.conf配置如下：

# 启动多worker进程
worker_processes  auto;
events {
    worker_connections  1024;
}
http {
    include    /etc/nginx/mime.types;

    # 设置缓存信息
    proxy_temp_path /tmp/temp_dir;
    proxy_cache_path /tmp/cache levels=1:2 keys_zone=cache_one:100m inactive=1d max_size=1g;

	# 配置springboot服务集群
	upstream seeker_server {       
       server service-XXXX-gateway-fat:7000 weight=3; #这里的名称为K8s后端API服务名
       server 192.168.2.103:7000 backup; #这里backup表示为备份服务器。
	   keepalive 32;
    }

    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"'
                      '"$upstream_cache_status"';
    sendfile        on;
    keepalive_timeout  65;
    # 启用gzip压缩
    gzip  on;

    server {
        listen 80;
        # listen 443;
        # ssl on;
        # ssl_certificate /etc/nginx/ssl/server.crt;
        # ssl_certificate_key /etc/nginx/ssl/server.key;

        server_name  localhost;

        charset utf-8;
        # 日志输出
        # access_log  /var/log/nginx/host.access.log  main;

        # nginx静态文件缓存
        location ~* ^.+\.(gif|jpg|jpeg|png|htm|html|css|js|flv|ico|swf|cur|gz|svg|map|mp4|ogg|ogv|webm)$ {
            proxy_redirect off;
            # 关闭静态资源的访问日志
            access_log off;
            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_cache cache_one;
            proxy_cache_key   $host$uri$is_args$args;
            proxy_cache_valid 200 302 1h;
            proxy_cache_valid 301 1d;
            proxy_cache_valid any 1m;
            expires 7d;
            add_header Nginx-Cache "$upstream_cache_status";
        }

        # vuejs静态文件配置
        location / {
            root   /etc/nginx/html;
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
        # 对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        # 因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }

        # 反向代理springboot接口服务
        location /xxxx/api/ {
			# 解决springboot中获取远程ip的问题
			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_pass http://seeker_server/gateway/xxxx/api/; #此处的seeker_server要和上述的upstream一致。 
			proxy_http_version 1.1;
	        proxy_set_header Connection "";
        }
       
        error_page  404              /404.html;

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

这里的upstream可以直接写成域名或IP都可以，同时还支持K8S环境下的后端项目的service名称，这样就自动实现了负载均衡，而无需再通过增加不同的机器IP来实现了。