webpack高级概念，解决单页面应用路由问题（vue用脚手架，404找不到页面二）（系列十五)

解决方法：

　　1.由后台解决，后台在服务端添加配置，检测到404页面，直接跳转指向到 index.html 的 路径


　　2.由前端解决，不采用 mode:"history" 模式，采用 hash 路径；就可以解决404的问题 --- 虽然这样会显得 url 很丑

 

用vue-cli脚手架搭建单页面项目

router开启了history模式，如果是本地打包后访问的话，是没有问题的，但是一旦部署到服务器上面，还需要在服务端进行配置修改，若没有进行相关配置，则会报错。

下面具体讲一下History模式：
1、 为什么要开启？
首先，你的网站首页，域名后跟着一个大大的#，太难看了！跟开发他美丽帅气的程序汪完全不搭（hash模式路由）。

其次，官网上人家尤大大说了：“ history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。”

怎么理解呢？举个常见的场景说，就是如果你开发的是手机端应用，你从主页点击进去新闻列表，此时你看完新闻，想要回到首页，按以前的想法，那就是一个href重新打开首页呀。然后首页重新加载js,向服务器请求新闻列表,等等这些初始化的工作，都要重新做一次。对于用户而言，这个过程慢、费流量，用户体验其实是不好的。

而html的history模式，就能够让你从新闻详情页跳转到首页，不需要再次进行数据的初始化了。当然，这可能需要配合vuex来进行了。

2、 在哪儿开启？
在你的实例化Router的时候配置开启即可:

const routers = new VueRouter({
routes: router,
mode: 'history'
})

 

3、 开启后还需要做什么？
如果是本地环境的话，啥也不用做，直接就可以访问了。

但如果需要部署到服务器上，还需要在服务端进行修改。详细介绍vue官网上其实有介绍 —— history-mode模式介绍。https://router.vuejs.org/zh/guide/essentials/history-mode.html

也就是，在服务端配置一下就行了。为什么要配置呢？
假如你的项目已经部署到服务器上了，并且服务端没有进行任何配置。此时你访问80端口首页，比如idays.cc,依然是可以正常打开的（根路径，会获取index.html页面），但真的没有问题了吗？

必须有问题啊。你随便进入一个除了你项目的首页之外的一个地址，比如 idays.cc/article/detail/5 ，然后点击浏览器的刷新按钮。你会发现，唉？？怎么404了？

 

原因就是：

对于正常的网站，假如有一个路径为www.idays.cc/article/detail/5页面。

原来的hash模式，自动加了一个#,也就变成了www.idays.cc/#/article/detail/5，而服务器无法识别url中的#后面的部分，所以，无论#/后跟的是什么，都统一被识别为idays.cc，也就是相当于你请求的实际上就是你项目下的index.html，然后等到html中的静态资源加载完成，其中的某个js再获取到URL中#后面的部分（前台路劲，hash路劲变化，自动跳转），进行项目内部的路由跳转，于是跳转到了你想要去的article/detail/5页面。

而对于history模式而言，没有了#，对于服务器来说，域名之后的数据，比如article/detail/5，就是真实的路径（后台的路径）。所以当你直接访问www.idays.cc的时候没有任何问题（获取index.html页面）。但是当你直接访问www.idays.cc/article/detail/5，服务器就真的会去查找/article/detail/下的资源（没有5.html页面）。那肯定找不到呀，因为你的index.html根本就不在/article/detail/下呀！没办法，只能抛出404错误啦。

所以嘛，老老实配置一下你的服务器吧。我前置服务器用的是Nginx,修改下配置，在你原来相关节点的配置后面加上try_files $uri $uri/ /index.html就可以啦，然后relaod即可。

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

这个配置的作用是什么呢？单从我上面的贴出配置而言，就是当你访问你的域名的时候，服务器找不到相关资源的时候，最后就会返回你这个项目中的index.html。

 

原文链接：https://blog.csdn.net/lensgcx/article/details/78439514