VUE的history模式下除了index外其他路由404报错解决办法


Posted in Javascript onAugust 21, 2019

我们先来看下代码:

location / {
index index.html;
root /dist;
try_files $uri $uri/ /index.html;
}

try_files首先会判断他是文件,还是一个目录,结果发现他是文件,与第一个参数 $uri变量匹配。
然后去到网站目录下去查找文件是否存在,如果存在直接读取返回。如果不存在直接跳转到第三个参数.

现在不明白的是既然跳到了index为什么显示的还是路由后的界面

内容扩展:

问题背景:

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、

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 相关文章推荐
javascript 多浏览器 事件大全
Mar 23 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
js字符串操作方法实例分析
May 06 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
关于JavaScript回调函数的深入理解
Jun 27 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 #jQuery
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 #Javascript
Vue仿微信app页面跳转动画效果
Aug 21 #Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 #Javascript
深入理解Vue keep-alive及实践总结
Aug 21 #Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 #Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 #Javascript
You might like
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
简单介绍PHP非阻塞模式
2016/03/03 PHP
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
原生JS轮播图插件
2017/02/09 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
vue计算属性和监听器实例解析
2018/05/10 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
Python程序运行原理图文解析
2018/02/10 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
介绍一下Linux文件的记录形式
2013/09/29 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫