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下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
理解Javascript_11_constructor实现原理
Oct 18 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 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中使用gettext来支持多语言的方法
2011/05/02 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
项目中应用Redis+Php的场景
2016/05/22 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
python网络编程之数据传输UDP实例分析
2015/05/20 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
学习计划书怎么写
2014/09/15 职场文书
2015年教师节广播稿
2015/08/19 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL