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 相关文章推荐
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
Sep 22 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
Vue Promise的axios请求封装详解
Aug 13 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
Apr 25 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
Jun 20 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
php使用pack处理二进制文件的方法
2014/07/03 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
python2与python3共存问题的解决方法
2018/09/18 Python
Python简易版图书管理系统
2019/08/12 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
汉森批发:Hansen Wholesale
2018/05/24 全球购物
大学生求职简历的自我评价
2013/10/21 职场文书
教师个人鉴定材料
2014/02/08 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
二手房购房意向书
2015/05/09 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL