vue 两种模式配置

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

2：https://blog.csdn.net/qq_37788558/article/details/91427071