前端项目打包部署问题：部署到服务器之后刷新页面出现404 （Vue history与hash模式部署时的区别）

前情提要：

1.Vue属于单页面应用（SPA）

什么是单页面（SPA） ？

SPA是一种网络应用程序，所有与用户交互都是通过动态重写当前页面来实现页面变化，在Vue项目中，不管我们写多少个路由 ，最终打包后也只会有一个index.html。
即 单页面就是指整个前端服务中就只有一个index.html，前端项目开发完成部署到服务器上之后，用户访问的始终是这个静态页面，而页面中呈现的所有交互，例如页面跳转，数据跳转等都是这一个页面中完成的。

而传统的多页面模式，每一个页面对应一个html文件，当我们刷新页面的时候，会主动向后端请求对应的html文件，拿到html文件后渲染界面。

两种路由模式 ： history / hash

1. hash模式
（1） hash模式下地址栏中带#，路由地址就是#后面的内容，切换路由，变化的是#后面的内容
（2） hash模式下url变化是根据浏览器的hashChange方法监听的
（3） hash模式兼容性好 ，能兼容低版本的IE浏览器
2.history模式
（1）history模式下的地址栏中没有#，视觉上更加美观
（2）history路由的实现主要依赖于html5提供的全局对象 Interface 中的pushState()方法和replaceState()方法，它们提供了对浏览器历史记录进行修改的功能。

history模式下手动刷新页面出现404错误 而hash模式不会出现的原因

hash模式不出现的原因
因为hash模式请求页面的地址永远是#前面的内容，所以总能请求成功，得到index.html页面，在通过路由渲染显示对应的组件 。
换句话说 hash虽然出现在url中，但不会包括在http请求中，对服务端完全没有影响。而改变hash，在hash面膜是中会被haschange方法所捕获，在Vue中会触发页面的修改。

为什么history模式下有问题
因为history模式请求页面的地址是地址栏里面全部的内容
例如: http://192.168.30.161:5500/home 在页面不刷新的情况下默认访问的始终是路径下的index.htmlhttp://192.168.30.161:5500/index.html,但一旦刷新页面后访问的就是：http://192.168.30.161:5500/home/index.html，很明显服务器没有这个资源，所以会出现404错误因此使用history模式的路由时需要配置nginx,告诉浏览器，当访问的资源不存在时，默认访问静态资源下的index.html