在解决问题之前先让我们了解下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配置
项目配置
资源引入路径
保留引用引号
