脚本宝典收集整理的这篇文章主要介绍了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的方式会被第三方劫持！！！

脚本宝典总结

以上是脚本宝典为你收集整理的VUE路由history模式坑记--NGINX全部内容，希望文章能够帮你解决VUE路由history模式坑记--NGINX所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。