VUE路由history模式坑记--NGINX

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了VUE路由history模式坑记--NGINX，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1353字，纯文字阅读大概需要2分钟。

内容图文

因微信分享和自动登录需要，
对于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所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---