Vue下路由History模式打包后页面空白的解决方法


Posted in Javascript onJune 29, 2018

vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息.

这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base

// base: '/history',
// mode: 'history',

这个base即为项目路径.

以上两个都解决了,还是会发现,此时只有首页能访问,通过首页点进去其他路由也是可以的,但是如果在其他路由刷新就有错误了,这个懂history模式的也应该知道,history模式是h5 api的 history.pushState,相对于是浏览器模拟了一条历史,而真正服务器上没有这个路径资源,为什么hash模式不存在这个问题呢?hash模式是带#,这个服务器不会解析,相对于还是返回html而已,index.html会根据vue路由去解析,而history模式则会请求服务器上的此地址,服务器上没有相关路径就会报错了,vue-router的官方文档有介绍各种配置,比如ngnix的配置

location / {
 try_files $uri $uri/ /index.html;
}

上面这个对于直接项目的根目录是可以的,但是如果项目不是根目录还是会有问题,

location /history {
   root C:/web/static;
 index index.html index.htm;
 #error_page 404 /history/index.html;
 if (!-e $request_filename) {
  rewrite ^/(.*) /history/index.html last;
  break;
 }
}

上面这个是项目路径名为history,这样配置后就不会有vue打包后页面空白问题了,history路由也可以自由访问了,不过要记得上面说的,非根目录的项目需要加上base 的路径

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript之编码规范 推荐
May 23 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
Jun 22 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
node 标准输入流和输出流代码实例
Sep 19 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 #Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 #Javascript
vue ssr 指南详读
Jun 29 #Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 #jQuery
Vue实现textarea固定输入行数与添加下划线样式的思路详解
Jun 28 #Javascript
详解swipe使用及竖屏页面滚动方法
Jun 28 #Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 #Javascript
You might like
PHP个人网站架设连环讲(一)
2006/10/09 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
js的表单操作 简单计算器
2011/12/29 Javascript
javascript学习笔记(十三) js闭包介绍(转)
2012/06/20 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
写一个用矩形法求定积分的通用函数
2012/11/08 面试题
外贸采购员求职的自我评价
2013/11/26 职场文书
经理秘书找工作求职信
2013/12/19 职场文书
销售主管岗位职责
2014/02/08 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
大学生英语演讲稿
2014/04/24 职场文书
银行求职自荐书
2014/06/25 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
国防教育标语
2014/10/08 职场文书
行政答辩状范文
2015/05/21 职场文书