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 相关文章推荐
JS Array对象入门分析
Oct 30 Javascript
jquery 上下滚动广告
Jun 17 Javascript
点击下载链接 弹出页面实现代码
Oct 01 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 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
PHP学习笔记之一
2011/01/17 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
Jquery性能优化详解
2014/05/15 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
jQuery事件详解
2017/02/23 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
python exit出错原因整理
2020/08/31 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
求职信范文英文版
2014/01/05 职场文书
税务干部鉴定材料
2014/02/11 职场文书
明信片寄语大全
2014/04/08 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
经营目标管理责任书
2014/07/25 职场文书
小学教师求职信范文
2015/03/20 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书