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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
javascript的tab切换原理与效果实现方法
Jan 10 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
详解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 join函数应用
2011/05/04 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
详解php中反射的应用
2016/03/15 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
wxPython中listbox用法实例详解
2015/06/01 Python
python 循环while和for in简单实例
2016/08/16 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
python 如何快速复制序列
2020/09/07 Python
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
称象教学反思
2014/02/03 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
二手房买卖协议书
2014/04/10 职场文书
企业挂职心得体会
2014/09/10 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android
css 边框添加四个角的实现代码
2021/10/16 HTML / CSS
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS