Vue路由history模式解决404问题的几种方法


Posted in Javascript onSeptember 29, 2018

问题背景:

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、 (vue.js官方教程里提到的https://router.vuejs.org/zh-cn/essentials/history-mode.html)

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 八进制转义字符(8进制)
Apr 08 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
layui前端时间戳转化实例
Nov 15 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 #Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 #Javascript
浅谈针对Vue相同路由不同参数的刷新问题
Sep 29 #Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 #Javascript
详解React之key的使用和实践
Sep 29 #Javascript
vue给组件传递不同的值方法
Sep 29 #Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 #Javascript
You might like
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
python 判断自定义对象类型
2009/03/21 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python 备份程序代码实现
2017/03/06 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
python 字符串和整数的转换方法
2018/06/25 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
python numpy实现rolling滚动案例
2020/06/08 Python
python二维图制作的实例代码
2020/12/03 Python
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
采购部岗位职责
2013/11/24 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
护士毕业生自荐信
2014/02/07 职场文书
教师批评与自我批评范文
2014/10/15 职场文书
学生打架检讨书
2014/10/20 职场文书
参观邀请函范文
2015/02/02 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python