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 相关文章推荐
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
WdatePicker.js时间日期插件的使用方法
Jul 26 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
微信小程序开发之转发分享功能
Oct 22 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计算页面执行时间的实现代码
2013/06/18 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
localStorage的黑科技-js和css缓存机制
2017/02/06 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
2017/05/15 jQuery
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
Python多进程编程技术实例分析
2014/09/16 Python
Python中文件的读取和写入操作
2018/04/27 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
python 异步async库的使用说明
2020/05/04 Python
Python使用Selenium实现淘宝抢单的流程分析
2020/06/23 Python
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
个人授权委托书
2014/04/03 职场文书
自主招生自荐信格式
2015/03/04 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
安全教育片观后感
2015/06/17 职场文书
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS