脚本宝典收集整理的这篇文章主要介绍了

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/'),要不页面会显示为空白:

clipboard.png

clipboard.png

以上几种方案基本上已经能把坑填上了,如果还有其他问题,比如浏览器版本低不支持什么的,不要来问了。

希望大家使用rewrite 的方式进行处理,404的方式会被第三方劫持!!!

总结

以上是脚本宝典为你收集整理的

VUE路由history模式坑记–NGINX

全部内容,希望文章能够帮你解决

VUE路由history模式坑记–NGINX

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过