【vue】前端渲染之Fallback

路由：路由就是url到函数的映射

 

后端渲染：网页通常是通过后端路由直出给客户端浏览器的。也就是网页的html一般是在后端服务器里通过模板引擎渲染好再交给前端的。比较原始，比如python的django的MVT结构，通过url，匹配view里的函数，通过函数去渲染templates里边的html

 

前端渲染：

• 一个原则就是，在所有后端路由规则的最后，配置一个规则，如果前面其他路由规则都不匹配的情况下，就执行这个规则——把构建好的那个index.html返回给前端。
• 这样就解决了后端路由抛出的404的问题了，因为只要你输入了http://localhost/user/1这地址，那么由于后端其他路由都不匹配，那么就会返回给浏览器index.html。
• 浏览器拿到这个html之后，router库就开始工作，开始获取地址栏的URL信息，然后再告诉前端库（比如Vue）渲染对应的页面。到这一步就跟hash模式是类似的了。
• 当然，由于后端无法抛出404的页面错误，404的URL规则自然是交给前端路由来决定了。你可以自己在前端路由里决定什么URL都不匹配的404页面应该显示什么。

 

当然在开发阶段不存在这样的问题，因为vue-cli在开发模式下帮你启动的那个express开发服务器帮你做了这方面的配置。理论上在开发模式下本来也是需要配置服务端的，只不过vue-cli都帮你配置好了，所以你就不用手动配置了。在webpack.config.js, 找到devServer可以看到

devServer: { historyApiFallback: true}

 

那么生产环境下服务端的重定向如何配置呢？

生产模式下服务端的这些配置也很简单，参考vue-router给出的配置例子。

当然，由于后端无法抛出404的页面错误，404的URL规则自然是交给前端路由来决定了。你可以自己在前端路由里决定什么URL都不匹配的404页面应该显示什么。

例如Vue中的操作：