登录
    hello,it's me!

nginx 部署vue 项目多页面配置

技术宅 破玉 33次浏览 0个评论

普通的vue 都是SPA 单页面的。
什么是SPA
单页Web应用(single page application,SPA),就是只有一个Web页面的应用,
是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序
单页面应用程序:
只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据.然后, 由页面中js解析获取的数据, 展示在页面中
传统多页面应用程序:
对于传统的多页面应用程序来说, 每次请求服务器返回的都是一个完整的页面
优势
减少了请求体积,加快页面响应速度,降低了对服务器的压力
更好的用户体验,让用户在web app感受native app的流畅
单页面 vue 部署配置

 server {
        listen       80;
        server_name  localhost;
	    root /usr/share/nginx/html/dist/;
		 location / {
             try_files $uri $uri/ @router;
             index index.html;
         }
       

        location @router {
             rewrite ^.*$ /index.html  last;
        }
		
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

最近系统实现了多页面配置,于是nginx 改为如下:

server {
        listen       80;
        server_name  localhost;
	    root /usr/share/nginx/html/dist/;
		 location / {
             try_files $uri $uri/ @router;
             index index.html;
         }
       

        location @router {
            # rewrite ^.*$ /index.html  last;
           # 多页面 时刷新配置如下 
            rewrite ^((?!/(problemInv|code)/*).)*$ /index.html last; 
            rewrite ^/problemInv/*  /problemInv/index.html  last;
            rewrite ^/code/*  /code/index.html  last;
        }
		
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }


华裳绕指柔, 版权所有丨如未注明 , 均为原创|转载请注明nginx 部署vue 项目多页面配置
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址