vite+ts+monorepo从0搭建vue3组件库(八) vitepress+github actions部署组件库

上一节已经把组件库文档首页和button组件文档写好了，现在把它部署到github静态站点下，后续只需要继续补充其他组件的文档，按照步骤部署即可。

部署静态站点

首先新建一个组织叫dlxui,在这个组织下新建一个仓库叫dlx-ui,在site目录下执行打包命令：pnpm run docs:build,会生成一个dist文件夹

回到github仓库：点击settings，再点击pages，选择 Deploy from a branch, 选择根路径root

把dist里面的文件，提交到github仓库的main分支中：

最终我们的访问地址是https://dlxui.github.io/dlx-ui/,所以我们的site/docs/.vitepress/config.js 的 base 应该为/dlx-ui/

export default {
    base: process.env.NODE_ENV === 'production' ? '/dlx-ui/' : '/',
   ...
}

只要有代码提交到main分支中，github就会自动构建，点击Actions:

点击进去最新的一个绿色按钮，

就会自动生成一个链接，这是我的文档地址。

后续写的其他的组件的文档，继续执行打包命令pnpm run docs:build，替换掉仓库的dist的文件的内容，提交到github的main分支，就会重新构建。