在解决问题之前先让我们了解下vue中的hash模式和history模式:
vue中的hash模式:
hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:
window.onhashchange = function(event){console.log(event.oldURL, event.newURL);let hash = location.hash.slice(1);document.body.style.color = hash;}
当页面地址因为hash值发生变化的时候,地址栏中的url都会被浏览器记录下来,所以我们的浏览器才可以实现前进后退的功能,这样一来,即使浏览器没有请求服务器,页面的状态和url也会被关联起来,这就是我们所熟悉的前端路由。
vue中的history模式:
该模式对应浏览器的是三种状态,即前进,后退,跳转.
例子:
history.go(-2);//后退两次history.go(2);//前进两次history.back(); //后退hsitory.forward(); //前进
hash 和 history 模式的区别
hash模式url带#号 兼容性好,history模式不带#号 是h5的新APIhistory模式的优势 没有# url比较规范 用户看着舒服我们用vue 或者 react做的页面 分享到其他的app中 但是app中不允许 url 中带有 #注意 : history 不怕前进 不怕后退 怕刷新 在访问了二级页面的时候 做刷新操作 就会出现 404 需要后端配置下 apache或者nginx的url重定向 定向到我们的首页history 模式的原理 H5新推出的两个神器:pushState与replaceState作用就是将url替换且不刷新,好比挂羊头卖狗肉,http并没有去请求服务器该路径下的资源,一旦刷新就会暴露这个实际不存在的“羊头”,显示404。如何解决404弊端,这就需要服务器端做点手脚,将不存在的路径请求重定向到入口文件(index.html)hash 模式原理 window是可以监听到哈希值的变化的(onhashchage事件),这就意味着:当url中的哈希值发生了变化,无需发起http请求,window也可以监听到这种变化,并按需加载前端的代码块最后补充 history 模式下 build之后在本地打开index.html是无效的 hash模式则可以打开history模式的弊端
该模式在帮我们丢掉了丑陋的#的同时,也为我们带来了不小的麻烦,不怕前进,不怕后退,就怕刷新。当页面刷新的时候会出现页面报404错误,以及我们引入的JS和图片等地址的丢失报错等一系列错误。这是因为刷新页面是实实在在地去请求服务器,而不是像hash模式下被记录下状态与url的页面之间的切换,在hash模式下,前端路由修改的是#中的信息,而浏览器请求服务器时是不带它玩的,所以没有问题.但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。
解决方案
这一步需要后台ngin配置支持,如果后台没有正确的配置,当用户在浏览器刷新页面的时候就会出现上述错误。
所以,在打包以后需要将index.html中引入的路径从绝对路径改为相对路径。
例如:
相对路径:<script src="./test.js"></script>绝对路径:<script src="/test.js"></script>
记得引入文件例如图片等相关的路径可能也要修改(这个要根据自己存放文件的路径来具体区分),或者根据控制台报错时所提示的错误路径,根据这个路径建立一个文件夹,将要引入的文件放进去也可以解决文件或者图片路径找不到的情况。
Nginx配置
项目配置
资源引入路径
保留引用引号