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 相关文章推荐
js的Boolean对象初始值示例
Mar 04 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
php输出形式实例整理
2020/05/05 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
js网页版计算器的简单实现
2013/07/02 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
JavaScript 实现的checkbox经典实例分享
2016/10/16 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
为python设置socket代理的方法
2015/01/14 Python
python继承和抽象类的实现方法
2015/01/14 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
应届生服务员求职信
2013/10/31 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
团代会开幕词
2015/01/28 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
2019年最新借条范本!
2019/07/08 职场文书
详解Python flask的前后端交互
2022/03/31 Python