vue 两种模式配置

矫情吗；* 2023-03-12 09:29 26阅读 0赞

## vue 两种模式配置：hash模式和history模式 ##

*  hash ——即地址栏URL中的\#符号。hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。在hash模式下，仅hash符号之前的内容会被包含在请求中，如 http://www.baidu.com/\#a, 则浏览器只会把http://www.baidu.com发送给后端web服务器，而\#a则browser自己用来对页面内进行锚定定位，也就是对于web服务器来说，它收到的uri中是没有\#a这样的信息的，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；

*  history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。需要特定浏览器支持history模式，会出现404 的情况，需要后台配置。history模式下，前端的url必须和实际向后端发起请求的url 一致，如http://www.baidu.com/a/ ，如果后端缺少对/a 的路由处理，将返回404错误。

对于hash模式，后端的web server不会有太多的麻烦，而history模式下，则需要做下面的处理。

例子如下

location @leaseFrontRouter {
                rewrite ^.*$ /projectA/index.html?$query_string last;
            }
    
    location /projectA {
            if ($uri = "/lease/renttest"){
               rewrite ^/(.*) http://10.122.61.200:8888/projectA/?value=You;
            }
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers X-Requested-With;
            add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
            try_files $uri $uri/ @leaseFrontRouter;
            index  index.html index.htm;
            alias   /data/nginx/html/lease-front/dist/;
       }

当用户在页面里面点击跳转时，地址栏的url 会改变，但是vue的history技术不会引起browser发起新的请求，则后面的web server 比如nginx不会收到新的URL请求，页面能运行。

但是当用户按f5刷新，或者直接敲入地址时，则那个新的url会发到后面的nginx，则nginx会按uri的层次去找路由（通过location， alias配合），但是比如 http://a.com/b/index.html?c=d ，则nginx会找到这个项目root下面的b目录下的index.html，但是不会有这样的目录，因为vue是把b作为内部路由的。则nginx会报404，找不到文件的错误。

如何解决？这要用上面的nginx try\_files技术，把这个uri给重新改成打开该项目root下的index.html即可。

当然，前端开发必须在这个index.html去处理所有的路由问题。

注意一下：rewrite ^.\*$ /projectA/index.html?$query\_string last; 这个语句的用法。

当匹配到这个语句后，则nginx会重新再次去匹配所有的location, 然后会再次进入/projectA，然后再次到到try\_files语句，然后

命中 $uri这个选项，就找到了目标文件，返回给浏览器了。

"rewrite **last**: 使用了last 指令，rewrite 后会跳出location 作用域，重新开始再走一次刚刚的行为"

参考文章：

1. [https://blog.csdn.net/qq\_41475058/article/details/89516051][https_blog.csdn.net_qq_41475058_article_details_89516051]

2：[https://blog.csdn.net/qq\_37788558/article/details/91427071][https_blog.csdn.net_qq_37788558_article_details_91427071]

[https_blog.csdn.net_qq_41475058_article_details_89516051]: https://blog.csdn.net/qq_41475058/article/details/89516051
[https_blog.csdn.net_qq_37788558_article_details_91427071]: https://blog.csdn.net/qq_37788558/article/details/91427071