VUE路由history模式坑记--NGINX

voidking 发布于2019-07-25 13:59 / 1483人阅读

摘要：还有可能会有一些隐藏的问题没被发现。如果能像其他系统的路径一样，就不存在这些问题了。对于的模式在开发的时候，一般都不出问题。是因为开发时用的服务器为，环境中自然已配置好了。希望大家使用的方式进行处理，的方式会被第三方劫持

因微信分享和自动登录需要，
对于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的方式会被第三方劫持！！！

云服务器超融合服务器阿里云服务器路由模式 history 遇坑记脱坑记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/39611.html

实现一个前端路由，如何实现浏览器的前进与后退？

摘要：执行过程如下实现浏览器的前进后退第二个方法就是用两个栈实现浏览器的前进后退功能。我们使用两个栈，和，我们把首次浏览的页面依次压入栈，当点击后退按钮时，再依次从栈中出栈，并将出栈的数据依次放入栈。 showImg(https://segmentfault.com/img/bVbtK6U?w=1280&h=910); 如果要你实现一个前端路由，应该如何实现浏览器的前进与后退？ 2. 问题...

刘东 2019-08-23 18:01 评论0 收藏0
Vue Router history模式的配置方法及其原理

摘要：但如果要使用模式，我们需要在后端进行额外配置。模式的配置方法我们来看看官方文档是教我们怎么配置的模式。模式的配置实践及原理强烈建议阅读这部分之前，先看一下的这部分文档和这部分文档。只配置前端的情况首先，我们将设置为，但不配置后端。始发于我的博客 ryougifujino.com，欢迎访问留言。 vue-router分为hash和history模式，前者为其默认模式，url的表现形式为...

Richard_Gao 2019-08-30 11:04 评论0 收藏0
vue路由history模式刷新页面出现404问题

摘要：模式下，中存在，用模式就能解决这个问题。但是模式会出现刷新页面后，页面出现。解决的办法是用配置一下。 vue hash模式下，URL中存在#，用history模式就能解决这个问题。但是history模式会出现刷新页面后，页面出现404。解决的办法是用nginx配置一下。在nginx的配置文件中修改方法一： location /{ root /data/nginx/html...

sanyang 2019-07-25 14:28 评论0 收藏0
Vue项目部署遇到的问题及解决方案

摘要：模式部署没有什么问题，只要访问到服务器上的，就可以访问网站了。问题起因在做年度账单项目的时候，项目部署的时候，用的是模式。这样几项配置后，就可以在子目录下访问网站，刷新也没有问题。写在前面 Vue-Router 有两种模式，默认是 hash 模式，另外一种是 history 模式。 hash：也就是地址栏里的 # 符号。比如 http://www.example/#/hello，...

姘搁『 2019-08-23 14:38 评论0 收藏0
Vue项目部署遇到的问题及解决方案

摘要：模式部署没有什么问题，只要访问到服务器上的，就可以访问网站了。问题起因在做年度账单项目的时候，项目部署的时候，用的是模式。这样几项配置后，就可以在子目录下访问网站，刷新也没有问题。写在前面 Vue-Router 有两种模式，默认是 hash 模式，另外一种是 history 模式。 hash：也就是地址栏里的 # 符号。比如 http://www.example/#/hello，...

marek 2019-08-05 15:56 评论0 收藏0