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中“基本类型”之争小结
Jan 03 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 Javascript
Vue实现todo应用的示例
Feb 20 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常用的缓存技术汇总
2014/05/05 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
Python找出9个连续的空闲端口
2016/02/01 Python
python正则中最短匹配实现代码
2018/01/16 Python
Django权限机制实现代码详解
2018/02/05 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
英国网上花店:Bunches
2016/11/29 全球购物
护士节策划方案
2014/05/19 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
邀请函样本
2015/02/02 职场文书
大学生年度个人总结
2015/02/15 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
如何在python中实现ECDSA你知道吗
2021/11/23 Python
一文搞清楚MySQL count(*)、count(1)、count(col)区别
2022/03/03 MySQL
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python