记一次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实现代码
May 23 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
JS中的作用域链
Mar 01 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
Jan 20 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 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
模仿OSO的论坛(四)
2006/10/09 PHP
ECMall支持SSL连接邮件服务器的配置方法详解
2014/05/19 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
php中的依赖注入实例详解
2019/08/14 PHP
jquery获取input的value问题说明
2010/08/19 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
JavaScript Ajax编程 应用篇
2016/07/02 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
python下载图片实现方法(超简单)
2017/07/21 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
python3去掉string中的标点符号方法
2019/01/22 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
NumPy中的维度Axis详解
2019/11/26 Python
python构造IP报文实例
2020/05/05 Python
物理教师自荐信范文
2013/12/28 职场文书
生产部主管岗位职责
2014/01/06 职场文书
工作自我评价怎么写
2014/01/29 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
安全目标责任书
2014/07/22 职场文书
实习指导老师意见
2015/06/04 职场文书