浅谈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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
checkbox 复选框不能为空
Jul 11 Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 Javascript
Javascript设计模式之原型模式详细
Oct 05 Javascript
详解关于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 empty() 检查一个变量是否为空
2011/11/10 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
JS中的三个循环小结
2017/06/20 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
详解python内置模块urllib
2020/09/09 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
大学自荐信
2013/12/12 职场文书
女方回门宴答谢词
2014/01/14 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL