浅谈vue项目4rs vue-router上线后history模式遇到的坑


Posted in Javascript onSeptember 27, 2018

此次项目开发完后准备打包,因为hash模式的路径带#看着实在是有点丑,所以采用history模式。因为本次项目属于以前网站重构,但是seo问题,所以需要以前的一些地址路径写,所以vue-router的路径全部重改了。打包后查了网上一大堆,都说要把config里的index.js 里的build里的

assetsPublicPath: '/'改成‘./',打包上线发现在hash模式下是没问题的,

但一旦改成history模式,有些动态js文件的路径都是错的。无奈之下死马当活马医,把‘./'改回了‘/'在history模式

下再次打包上线,发现点击跳转页面都是正常的,有些小激动。但是history模式的通病就是不能刷新,

因为原来跳转时其实不是通过请求服务器的,而是通过js操作history的API改变地址完成的。

当你刷新了之后浏览器就耿直的去请求服务器了,然而服务器没有这个路由,于是就404了。

解决方法1:可以做个代理,让所有访问服务器的地址都返回同一个入口文件。(推荐使用)

解决方法2:采用静态文件的形式让每个目录都存在就不会报错了

我们服务器是采用nginx,我不会,没弄,就自己用了nodejs和express搭建了个简单服务器,并采用了官方推荐的中间件

connect-history-api-fallback

使用方法:

在服务器app.js文件里引入

var history = require('connect-history-api-fallback');
然后在app绑定路由之前绑定中间件,
app.use(history({ 
rewrites: [ 
{ from: /^\/wap\/.*$/, to: '/index.html' }//这个是正确方式 
]}));

我一开始

app.use(history({
rewrites: [
{ from: /^\/wap\/.*$/, to: '/' }
]
}));

这样的,发现刷新是正常的,但是路径后面总是多了个"/",看着很是奇怪,就试着改成当前下的html文件,发现真的可以。从此大功告成。

以上这篇浅谈vue项目4rs vue-router上线后history模式遇到的坑就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
js验证上传图片的方法
May 12 Javascript
JS面向对象编程详解
Mar 06 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
详解关于vue2.0工程发布上线操作步骤
Sep 27 #Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
Sep 27 #Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 #Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 #Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 #Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 #Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 #Javascript
You might like
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
PHP 读取Postgresql中的数组
2013/04/14 PHP
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
js倒计时小程序
2013/11/05 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Django学习教程之静态文件的调用详解
2018/05/08 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
香港零食网购:上仓胃子
2020/06/08 全球购物
节约用水倡议书
2014/04/16 职场文书
小学综合实践活动总结
2014/07/07 职场文书
先进员工事迹材料
2014/12/20 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python