VUE路由history模式坑记--NGINX

因微信分享和自动登陆须要，
对于URL中存在'#'的地址，处理起来比较坑（须要手动写一些代码来处理）。还有可能会有一些隐藏的问题没被发现。

若是VUE能像其余（JSP/PHP）系统的路径同样，就不存在这些问题了。

---

对于VUE的router[mode: history]模式在开发的时候，通常都不出问题。是由于开发时用的服务器为node，Dev环境中天然已配置好了。

但对于放到nginx下运行的时候，天然还会有其余注意的地方。总结以下：

在nginx里配置了如下配置后， 可能首页没有问题，连接也没有问题，但在点击刷新后，页面就没法显示了（404）

    location /{

        root   /data/nginx/html;
        index  index.html index.htm;
    }

为了解决404，须要经过如下两种方式:
方式一

    location /{

        root   /data/nginx/html;
        index  index.html index.htm;

        error_page 404 /index.html;
    }

方式二

    location /{

        root   /data/nginx/html;
        index  index.html index.htm;

        if (!-e $request_filename) {
            rewrite ^/(.*) /index.html last;
            break;
        }
    }

这样问题好像就能够解决了。

此外，若是VUE应用没有发布在域名的目录根下，好比[http://xxx.com/wx/]
那么除了上述配置：

 

location /wx{

        root   /data/nginx/html;
        index  index.html index.htm;

        #error_page 404 /wx/index.html;
        if (!-e $request_filename) {
            rewrite ^/(.*) /wx/index.html last;
            break;
        }
    }

还应该在VUE项目里把每一个路径加上[/wx]这一段(或者指定base: '/wx/')，要不页面会显示为空白：

以上几种方案基本上已经能把坑填上了，若是还有其余问题，好比浏览器版本低不支持什么的，不要来问了。

但愿你们使用rewrite 的方式进行处理，404的方式会被第三方劫持！！！