Vue路由history模式解决404问题的几种方法


Posted in Javascript onSeptember 29, 2018

问题背景:

vue-router 默认是hash模式,使用url的hash来模拟一个完整的url,当url改变的时候,页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话,我们可以使用路由的history的模式。比如如下网址:使用hash模式的话,那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问,如果路由使用 history的话,那么访问的路径变成 如下:http://localhost:8080/bank/page/count 这样的了;

不过history的这种模式需要后台配置支持。比如:当我们进行项目的主页的时候,一切正常,可以访问,但是当我们刷新页面或者直接访问路径的时候就会返回404,那是因为在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我直接在浏览器里输入这个地址的时候,就一定要对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404

怎么解决呢?我们现在可以把所有请求都转发到 http://localhost:8080/bank/page/index.html上就可以了。

解决方案:

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

但对于放到nginx下运行的时候,自然还会有其他注意的地方。总结如下:

在nginx里配置了以下配置后, 可能首页没有问题,但链接其他会出现(404)

location / {
      root  D:\Test\exprice\dist;
      index index.html index.htm;
      try_files $uri $uri/ /index.html;
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Credentials' 'true';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }
    
    location ^~/api/ {
      proxy_pass  http://39.105.109.245:8080/;
    }

为了解决404,需要通过以下两种方式:

1、官网推荐

location / {
root  D:\Test\exprice\dist;

index index.html index.htm;

try_files $uri $uri/ /index.html;

2、匹配errpr_page

location /{
root  /data/nginx/html;

index index.html index.htm;

error_page 404 /index.html;
}

3、 (vue.js官方教程里提到的https://router.vuejs.org/zh-cn/essentials/history-mode.html)

server {
    listen    8888;#默认端口是80,如果端口没被占用可以不用修改
    server_name localhost;
    root    E:/vue/my_project/dist;#vue项目的打包后的dist
    location / {
      try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
      index index.html index.htm;
    }
    #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
    #因此需要rewrite到index.html中,然后交给路由在处理请求资源
    location @router {
      rewrite ^.*$ /index.html last;
    }
    #.......其他部分省略
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 替换
Feb 19 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
javascript实现的简单计时器
Jul 19 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
Dec 26 Javascript
Ext JS 实现建议词模糊动态搜索功能
May 13 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 #Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 #Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 #Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 #Javascript
详解React之key的使用和实践
Sep 29 #Javascript
vue给组件传递不同的值方法
Sep 29 #Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 #Javascript
You might like
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
在JavaScript中typeof的用途介绍
2013/04/11 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
python怎么删除缓存文件
2020/07/19 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
求职者应聘的自我评价
2013/10/16 职场文书
农民工工资保障承诺书
2015/05/04 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js