浅谈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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
bootstrap table小案例
Oct 21 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
关于vue中 $emit的用法详解
Apr 12 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 Javascript
Vue中引入svg图标的两种方式
Jan 14 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
php实现webservice实例
2014/11/06 PHP
php上传功能集后缀名判断和随机命名(强力推荐)
2015/09/10 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
jquery带下拉菜单和焦点图代码分享
2015/08/24 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
2020/10/17 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
Python内置函数的用法实例教程
2014/09/08 Python
使用python实现链表操作
2018/01/26 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
Python猜数字算法题详解
2020/03/01 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
保送生自荐信范文
2013/10/06 职场文书
2014年社区工作总结
2014/11/18 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
关于运动会的广播稿
2015/08/19 职场文书
阿里云Nginx配置https实现域名访问项目(图文教程)
2021/03/31 Servers