记一次vue去除#问题处理经过小结


Posted in Javascript onJanuary 24, 2019

1、vue项目,在浏览器中看到的路由都是带有#的,如果想去掉#,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。只需要在路由表中,加入一行代码即可:使用mode: 'history'属性,在路由代码中添加mode:'history'即可

2、build以后部署到服务器,会出现刷新页面报404错误,查看了一些资料和官方vue history模式的配置方法进行尝试,我原以为就这样配置一下就可以了,结果……

我的网站是阿里云虚拟机+nginx+tomcat进行建站,在nginx的配置文件中,起初为去掉#时配置如下(网站正常运行):

记一次vue去除#问题处理经过小结

初始配置1

这种情况下,我将vue的路由改为history模式,地址中的#去掉了,但是也会出现上面所说的,刷新页面时报404错误,前端路由交给了后端去处理造成mapping匹配不上导致。

记一次vue去除#问题处理经过小结

官方的nginx解决办法

上面是官方给出的nginx解决办法,于是我对nginx的域名配置文件进行修改,修改结果如下:

记一次vue去除#问题处理经过小结

更新配置文件1

重启nignx服务后进行测试,结果在我禁止从缓存中获取的情况下,首页可以访问到,但是所有的静态资源无法访问

记一次vue去除#问题处理经过小结

静态资源无法访问

try_files属性按顺序检查文件是否存在,返回第一个找到的文件。结尾的斜线表示为文件夹 -$uri/。如果所有的文件都找不到,会进行一个内部重定向到最后一个参数。

index.html应该是找到了,但是为什么静态文件找不到呢?后来我改变配置,将静态文件与index.html地址配置到域名的根目录(这种情况与配置地址跳转8082有什么区别?请大神解惑一下)

更换配置,去掉8082的proxy_pass,添加root与index属性,如下图:

记一次vue去除#问题处理经过小结

更新配置文件2

结果首页都放问不到了

记一次vue去除#问题处理经过小结

403禁止访问

一般来说nginx 的 403 Forbidden errors 表示你在请求一个资源文件但是nginx不允许你查看。

403 Forbidden 只是一个HTTP状态码,像404,200一样不是技术上的错误。

哪些场景需要返回403状态码的场景?

1.网站禁止特定的用户访问所有内容,例:网站屏蔽某个ip访问。

2.访问禁止目录浏览的目录,例:设置autoindex off后访问目录。

3.用户访问只能被内网访问的文件。

以上几种常见的需要返回 403 Forbidden 的场景。

我由此推断,应该是配置中的目录不允许访问导致的,更新nginx.conf 启动用户替换为root重启nginx尝试,首页与静态资源都访问成功(这样配置是否存在安全隐患?)但是后台api访问报错404,这样,我意识到,我已经在错误的路上越走越远了,我域名指向前端首页,但是我域名又需要我指向后端服务,但是我用代理将域名指向后端服务以后,那我之前做的尝试都将不起作用,

我使用了nginx代理就不应该再在nginx处进行配置,我需要在nginx的后面tomcat或者应用上进行修改。(可能我项目的设计比较奇葩,将vue打包目录与后台springboot后台打包目录放到一起了前后台的首页都是同一个html)

1、鉴于我项目的特殊性,在不改变项目结构的情况下,我在应用中我 进行404 status转发,

具体代码如下:

记一次vue去除#问题处理经过小结

index首页转发

经过测试,虽然刷新时访问的页面仍然报404,但是可以重新加载该“页面”,实现了“刷新页面”。

记一次vue去除#问题处理经过小结

页面加载成功,network报404

2、本着求知精神,我把项目前后端分离,重新部署,尝试使用try_files属性验证一下

结果与1、中前台现象一样,只是network状态变成了304

记一次vue去除#问题处理经过小结

页面加载成功,network显示304

禁用缓存后结果如图:

记一次vue去除#问题处理经过小结

禁用缓存后,状态码200

至此,我的问题已经得到完美解决!

本来这里就是一个小坑,由于自己的原因把这个小坑变成大坑了。虽然解决问题的过程看着有点傻, 但终于弄明白了自己的问题所在:前后端合并与分离两种方式的区别,不要混淆

VUE前后端分离开发,整合后上线部署,这种方式奇葩吗?如果我不该变项目结构是否会有完美的解决方法?知道的大神请留言解惑一下,感激不尽……

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js字符编码函数区别分析
Jun 05 Javascript
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 #Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 #Javascript
vue车牌号校验和银行校验实战
Jan 23 #Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 #Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 #Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 #Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 #Javascript
You might like
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
PHP中串行化用法示例
2016/11/16 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
2010/05/08 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
2019/08/16 Javascript
layui表单验证select下拉框实现验证的方法
2019/09/05 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
Python内建模块struct实例详解
2018/02/02 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
python实现按行分割文件
2019/07/22 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
python爬取音频下载的示例代码
2020/10/19 Python
国外的一些J2EE面试题一
2012/10/13 面试题
医学专业应届生的自我评价
2014/02/28 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
python简单验证码识别的实现过程
2021/06/20 Python
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
基于Python实现流星雨效果的绘制
2022/03/18 Python
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电
Springboot中如何自动转JSON输出
2022/06/16 Java/Android