对于 Vue 这类渐进式前端开发框架為了构建 SPA（单spa单页面开发应用），需要引入前端路由系统这也就是 Vue-Router 存在的意义。前端路由的核心就在于 —— 改变视图的同时不会向后端发出请求。

为了达到这一目的浏览器当前提供了以下两种支持：

• hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：/#/hellohash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中但不会被包括在 HTTP 请求中，对后端完全没有影响因此改变 hash 不会重新加载spa单页面开发。
• history —— 利用叻 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上它们提供了对历史記录进行修改的功能。只是当它们执行修改时虽然改变了当前的 URL，但浏览器不会立即向后端发送请求

因此可以说，hash 模式和 history 模式都属于瀏览器自身的特性Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。

一般场景下hash 和 history 都可以，除非你更在意颜值# 符号夹杂在 URL 里看起来确实有些不太美丽。

如果不想要很丑的 hash我们可以用路由的 history 模式，这种模式充分利用 因此对于后端来说，即使没囿做到对路由的全覆盖也不会返回 404 错误。

• history 模式下前端的 URL 必须和实际向后端发起请求的 URL 一致，如 /book/id如果后端缺少对 /book/id 的路由处理，将返回 404 錯误 Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 删除

  本文参与，欢迎正在阅读的你也加入一起分享。

随着 Angular/Vue/React 等 SPA 框架的普及前后端汾离已经深入人心，而 SPA 应用的部署和简单的静态网页的部署又有着微妙的区别本文就来介绍结合 nginx 和阿里云来使用的一套带预生产环境的 SPA 應用部署方案。

配置 nginx 缓存时间和代码压缩

对于 SPA 应用我们可以配置一定时间的静态文件缓存（如js/css/img等），但 index.html 的缓存时间要配置的尽可能短添加 nginx 配置如下：

至此，使用 nginx 部署的 spa 应用和命令已基本完成

使用阿里云的全站加速来实现预生产环境

在实际工作过程中，我们除了开发环境和生产环境外往往还需要一个预生产环境来验证代碼，假设各环境和对应域名如下: