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 相关文章推荐
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
Nov 30 Javascript
在node中如何使用 ES6
Apr 22 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
在vue和element-ui的table中实现分页复选功能
Dec 04 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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
FCKeditor添加自定义按钮
2008/03/27 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
vue中的使用token的方法示例
2020/03/10 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
vue实现按钮切换图片
2021/01/20 Vue.js
Python fileinput模块使用实例
2015/06/03 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
Python切片操作深入详解
2018/07/27 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python判断完全平方数的方法
2018/11/13 Python
python 读取修改pcap包的例子
2019/07/23 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
Python2与Python3的区别详解
2020/02/09 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
2014年党务公开实施方案
2014/02/27 职场文书
2014年计生标语
2014/06/23 职场文书
优质护理心得体会
2016/01/22 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang