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闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
JS装饰器函数用法总结
Apr 21 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
angular4实现带搜索的下拉框
Mar 25 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学习之运算符相关概念
2011/06/09 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
浅谈JS运算符&&和|| 及其优先级
2016/08/10 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
Python中turtle作图示例
2017/11/15 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
管理学专业个人求职信范文
2013/12/13 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
幼儿园见习报告
2014/10/30 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
市场督导岗位职责
2015/04/10 职场文书
员工离职通知函
2015/04/25 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
Python中glob库实现文件名的匹配
2021/06/18 Python
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS