|
|
@@ -0,0 +1,57 @@
|
|
|
+# Github Pages 中部署 SPA（路由单页应用）
|
|
|
+
|
|
|
+Github Pages 特性的几点说明：
|
|
|
+
|
|
|
+- 不支持 Rewrite，所以原则上来说，静态单页应用路由是无法实现的，因为刷新页面后就会报404错误
|
|
|
+- 支持自定义404，那么我们就可以通过 404.html 来做点文章
|
|
|
+
|
|
|
+参考该评论：[Github #408](https://github.com/isaacs/github/issues/408#issuecomment-216721113)
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+无论是 Vue、Angular、React，打包生成的静态单页应用，理论上来讲都是可以利用 404的特性 部署到 Github Pages 上的。
|
|
|
+
|
|
|
+这里我做了一个示例： <https://js-cool.github.io/github-spa-demo/>
|
|
|
+
|
|
|
+可以直接访问查看效果，即便刷新页面也是能够响应的。支持嵌套路由、泛（Wildcard）路由及未找到（NoMatch）渲染。
|
|
|
+
|
|
|
+有几个需要注意的细节讲一下：
|
|
|
+
|
|
|
+## 1. 路由的设定
|
|
|
+
|
|
|
+如果用的是自定义域名，则没有太大关系。但如果是一个非 xxx.github.io 的项目， 而是类似这样的入口路径 `xxx.github.io/xxx` 就需要特别注意一下路由的命名，需要带上特定项目名称作为前缀。
|
|
|
+
|
|
|
+## 2. 静态资源的路径
|
|
|
+
|
|
|
+我在做尝试时候发现一个奇怪的现象
|
|
|
+
|
|
|
+```
|
|
|
+/home
|
|
|
+/about
|
|
|
+/topics
|
|
|
+```
|
|
|
+这样一级的路由是可以访问的，但如果是
|
|
|
+
|
|
|
+```
|
|
|
+/topics/routing
|
|
|
+/topics/xxx
|
|
|
+```
|
|
|
+
|
|
|
+这样路由页面，在刷新之后会变成大白板，一开始我以为是需要在对应目录下分别都创建一个 404.html 后来发现并不是这样，而是我静态资源加载错误，后来发现是因为 404 页面中引用的静态资源（.js 文件）是类似这样的加载方式：
|
|
|
+
|
|
|
+```html
|
|
|
+<script src="./app.js">
|
|
|
+```
|
|
|
+
|
|
|
+从当前目录下寻找，所以 js 资源也404了，就自然加载不出来。把引用路径改为绝对路径后就 OK 了。
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+贴上源码，位于：<https://github.com/js-cool/github-spa-demo>
|
|
|
+
|
|
|
+顺带着说明一波，该示例是用 HyperApp 实现，Parcel 打包。包含程序框架、路由、页面（JSX Templates）所有打包后，仅有10kb 大小。
|
|
|
+
|
|
|
+- Hyperapp 是一个仅有 1kb 的双向数据绑定框架，有 State 管理和统一的 Actions 入口，支持路由插件（2kb）。
|
|
|
+- Parcel 是一个 Webpack 的替代方案，免去了配置的烦恼，打包效率很高。
|
|
|
+
|
|
|
+后面我会再抽时间分享一些这样的东西，适合进阶玩家写出更极致简洁和高效兼顾的代码。
|
