前言

后端童鞋：小编，你来看看为啥我打包的前端项目放在后端运行初次访问的时候正常，
         为什么一刷新页面就404了呀！！
小编：啊！ 我想想。
小编：你是不是没有配nginx啊，前端包路径请求要映射到index.html的
后端童鞋: 那有没有其他方式先解决这个刷新问题呀

正文

因为VUE是SPA应用，而我们路由模式采用的是history模式，
url就像是正常url可以直接访问服务器资源，
但是router设置的路径不是真实存在的路径，所以刷新的时候404无法访问到资源。
想要history模式正常访问，还需要后台配置支持。
要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，
则应该返回同一个 index.html 页面，
这个页面就是你 app 依赖的页面。
也就是在服务端修改404错误页面的配置路径，让其指向到index.html。
因为这么做以后，你的服务器就不再返回 404 错误页面，
因为对于所有路径都会返回 index.html 文件。为了避免这种情况，
你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '*', component: ./404 }
  ]
})

nginx配置

location/ {
    try_files $uri $uri/ /index.html;
}

那既然后端童鞋要求小编先解决404问题，那咱只能上hash模式了

Hash 模式 小编更愿意叫 锚点模式
符号#原本的目的是用来指示URL中指示网页中的位置
https://www.example.com/index.html#home
即代表example的index.html的home位置
浏览器会自动把home位置滚动到页面可视区域内。
Hash虽然出现在URL中，但不会被包括在HTTP请求中
即#及之后的字符不会被发送到服务端进行资源或数据的请求
其是用来指导浏览器动作的，对服务器端没有效果，因此改变Hash不会重新加载页面。
Vue-router的作用就是通过改变URL
在不重新请求页面的情况下，更新页面视图，从而动态加载与销毁组件。
虽然地址栏的地址改变了，但是并不是一个全新的页面，
而是之前的页面某些部分进行了修改，这也是SPA单页应用的特点。
其所有的活动局限于一个Web页面中。
非懒加载的页面仅在该Web页面初始化时加载相应的HTML、JavaScript、CSS文件。
一旦页面加载完成，SPA不会进行页面的重新加载或跳转
而是利用JavaScript动态的变换HTML。
默认Hash模式是通过锚点实现路由以及控制组件的显示与隐藏来实现类似于页面跳转的交互。

总结

History模式：
    项目部署上线时需要后端配合，
    因为在使用history模式的时候路径会随着http请求发给服务器，
    项目打包部署时，如果后端没做配置，
    页面刷新，前端路径就会被当成资源去请求服务器，资源找不到就会报错404
Hash模式：
    仅 hash(#) 符号之前的内容会被包含在请求中
    虽然hash路径出现在URL中，但是不会出现在HTTP请求中，
    对后端完全没有影响，因此改变hash值不会重新加载页面