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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
Dec 06 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
js实现文字选中分享功能
Jan 25 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
微信小程序实现录音时的麦克风动画效果实例
May 18 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
详解JavaScript 中的批处理和缓存
Nov 19 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
mysql5详细安装教程
2007/01/15 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
vue组件通信传值操作示例
2019/01/08 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
python的socket编程入门
2018/01/29 Python
python实现遍历文件夹修改文件后缀
2018/08/28 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
保荐人的岗位职责
2013/11/19 职场文书
文员岗位职责范本
2014/03/08 职场文书
《锄禾》教学反思
2014/04/08 职场文书
企业委托书范本
2014/09/13 职场文书
服务承诺书
2015/01/19 职场文书
大连星海广场导游词
2015/02/10 职场文书
老公出轨后的保证书
2015/05/08 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书