vue的history模式，页面刷新404，以及引入得第三方插件或者JS路径错误的解决办法

在解决问题之前先让我们了解下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的新API
• history模式的优势
  • 没有# 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配置

项目配置

资源引入路径

保留引用引号