部署你的单页面应用到netlify

为什么选择 netlify

GithubPage 问题很多，仓库域名有后面的/xxx 的尾巴，访问慢，部署单页面应用很难受（不支持 redirect）, 而 netlify 很好的解决了这些问题。

• 免费是必杀技
• 自动部署，甚至自动执行脚本命令（eg npm run build）
• 配置文件支持 redirect/rewrite 以及 header 等其他好用的配置
• 自定义域名，免费 ssl 部署
• …

在 netlify 上部署单页面应用

新建仓库

首先你需要新建一个仓库来存储你的单页面应用项目或者是编译好的 dist 文件，我推荐是后者，因为我们是属于产品部署，调试等需求在本地做就可以了，当然 netlify 是支持项目自动部署的，配置起来也很容易。

可以参考我的仓库的结构

编辑 netlify.toml 文件，增加 redirect，避免出现刷新后 404

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

netlify 链接你的仓库

在 netlify 中新增站点，选择Import an existing project from a Git repository, 选择 github 并通过认证，然后我们就能看到我们的所有仓库了，与 githubPage 不同，我们可以使用 Private 仓库来部署网站，选择我们创建好的仓库

到了下一步我们只需要将 publish directory 改成 dist 即可

接着网站就会自动进行部署，部署成功后我们可以修改默认的域名或者绑定自己的域名，然后我们就可以直接访问我们的网站了，测试后速度还可以，国内走的是新加坡的节点。

可能出现的问题

跨域问题

如果你的单页面应用请求的 api 出现跨域问题，需要你自行修改服务端的跨域配置（如果套了 cdn 那么就要修改 cdn 的跨域配置）

路径问题

请确保你的单页面应用的根路径是/, 以及 netlify 正确的将publish directory设置为了你的index.html所在的文件夹