搭建Vue3组件库：第十四章使用Vercel部署在线文档-阿里云开发者社区

搭建Vue3组件库：第十四章使用Vercel部署在线文档

2023-01-08 931

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 介绍如何使用Vercel来部署我们的在线文档

文档网站需要发布到互联网上才能让更多的人知道。传统的发布方法需要做以下准备。

这里面租用服务器和域名需要一笔花费。安装 Linux、Nginx，配置域名与 HTTPS 证书需要相应的服务器端知识。注册 HTTPS 证书和实名认证都需要准备和寄送材料，传统的部署方式可以说是费时费力。假设你只想简单的发布一个静态网页，完全没有必要采用这个方案。

目前，最佳的解决方案是使用 Serverless 页面托管云服务。这些云服务只需简单配置就可以自动发布 Github 上面的页面；图形化界面操作省去了学习服务器端知识；分配二级 HTTPS 域名无需购买域名和实名认证，可以说是省时省力。

目前比较推荐的有 Github Pages、Vercel、Netlify。

我们选择Vercel来部署我们的在线文档。

首先需要登录 vercel.com/ 网站，使用 Github 账号第三方登录。这个时候 Vercel 会要求你提供 Github 数据读取授权。你可以认为 Vercel 这个时候充当的是一个 CI 服务器，它需要随时调用 Github API 随时监听项目的变化，并且获取最新的代码。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dRdv3MOG-1669311055394)(D:\GeniusNotes\ViteVue3UI\img\vercel_add_project.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7Ro8Su8i-1669311055395)(D:\GeniusNotes\ViteVue3UI\img\import_repo.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TWDxMLPt-1669311055395)(D:\GeniusNotes\ViteVue3UI\img\import_repo_end.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z3BJYlbh-1669311055396)(D:\GeniusNotes\ViteVue3UI\img\root_dir_doc.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WMVkRVDX-1669311055396)(D:\GeniusNotes\ViteVue3UI\img\build_env.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cAJvJPOX-1669311055397)(D:\GeniusNotes\ViteVue3UI\img\docs_dep_end.png)]$

下面要考虑的就是，如果有文档更新如何自动实现推送。当然这个 Vercel 已经默认提供这个功能。但是作为工程化，这个是需要大家考虑的一个问题。我们可以在 Deployments 中看到每次 Vercel 更新的记录，这表明 CI 工作正常。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7WnzUSWZ-1669311055397)(D:\GeniusNotes\ViteVue3UI\img\auto_dep.png)]$

文件名：packages/smarty-ui-vite/package.json

"homepage": "https://study-ui.vercel.app/",

下将发布后的地址填写到 package.json 中去，这一步的属性可以让 Github 页面中显示相应的主页链接。后续发布到 NPM 上也会有主页链接。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eM1FytCE-1669311055398)(D:\GeniusNotes\ViteVue3UI\img\online_doc.png)]$

本次部署选择了 Vercel ，其实其他两个服务也各有特点，尤其是 Github Pages，这个非常常用，也请大家体验一下。