vuetom/vitepress-theme-vuetom

我想知道如何把项目配置在githubpage上面

Closed this issue · 6 comments

xianyu21 commented

.io 我已经配置成功了
我参考了网上教程配置在其他库下面
但是一直没有配置成功 显示404
可以出一个教程?

lauset commented

目前 vitepress 版本已经更新至 1.0.0-alpha.4，之前主题出现问题的原因可能有以下几点：

  1. 配置中的 base 未设置成项目名称，例：base: '/vitepress-theme-vuetom'
  2. 配置中的 head 部分脚本做了路径转发导致项目直接前往 zh-CN 或 en-US 页面，这样pages就无法定位项目
  3. 由于当时依赖的 vitepress 是 0.x.x 版本的，没有及时更新

最近几天我对项目所依赖的版本都进行了升级，vitepress 1.x.x 版本对应了 vitepress-theme-vuetom 2.0.0 版本
简单说下 githubpages 部署：

  1. 对 docs 目录下的文件进行打包，npm run build，然后可以 npm run serve 进行预览
  2. 在 .vitepress 的 dist 下会生成静态网页文件，直接上传至 pages 分支即可
  3. 访问首页时可以 项目名+首页路径，例如（https://lauset.github.io/vitepress-theme-vuetom/zh-CN/）

PS：注意升级 vitepress >= 1.x.x vitepress-theme-vuetom >= 2.0.0 并更新 docs 下最新的代码，最新代码已提交，希望可以帮你解决问题😁

xianyu21 commented

当前 vitepress 版本已经更新至 1.0.0-alpha.4，在出现主题之前的问题的原因可能有以下提示：

  1. 配置中的base 未设置成项目名称，例如：base: '/vitepress-theme-vuetom'
  2. 配置中的head 部分脚本做路径导向项目
  3. vitepress 是当时依赖 0.xx 的版本，没有及时更新

最近几天我对项目所依赖的版本都进行了升级，vitepress 1.xx版本了vitepress-theme-vuetom 2.0.0版本 简单说下githubpages部署：

  1. 对 docs 下的文件进行打包，然后可以 npm run build 进行目录预览
  2. 在 .vitepress 的 dist 下会生成静态网页文件，直接上传至页面分支
  3. 访问首页时可以项目名+首页路径，例如（https://lauset.github.io/vitepress-theme-vuetom/zh-CN/）

PS：注意升级vitepress >= 1.xx vitepress-theme-vuetom >= 2.0.0 并更新文档下最新的代码，最新代码已提交，希望可以帮忙解决问题😁

我不知道docs目录下面package.json依赖 中
"vitepress-theme-vuetom": "file:../"
是否这样子的?😳😳😳

lauset commented

@xianyu21
【file:../】代表引入的是本地依赖库，也就是上一层目录（vitepress-theme-vuetom这个库），当然你也可以改成1.0.0版本号的形式

写成这样原因是因为这样引入开发时比较方便测试，所以我就没有换成发布过的依赖版本

当然这样也可以使用的，因为最后你需要经过打包构建步骤，这样也是没有问题的，你可以只直接在docs这个文档目录上进行修改即可，修改目录下的md文件内容为自己想要展示的内容，然后再打包就好了

lnool commented

vuetom-cli 版本没有更新

lauset commented

vuetom-cli 版本没有更新

好的，版本已经更新，目前更新了 vuetom-cli 至 0.2.x ，其中文档模版已和主题版本同步为2.x.x
commit

lauset commented

2022-09 静态页面最新部署方式

github.io 部署

  • 部署在当前用户下，访问路径例如（lauset.github.io）
  1. 修改 packages/docs/.vitepress/config.ts 中 base: '/'
  2. 修改 packages/docs/index.md 中 location.pathname = '/zh-CN/'

原因：防止 lauset.github.io/xx 多一层目录变为某个独立项目github pages的访问路径

  • 部署在其他项目下，访问路径例如（lauset.github.io/项目名）
  1. 修改 packages/docs/.vitepress/config.ts 中 base: '/项目名'
  2. 修改 packages/docs/index.md 中 location.pathname = '/项目名/zh-CN/'

原因：文档前缀与项目同名可防止资源丢失

vercel 部署

  1. 修改 packages/docs/.vitepress/config.ts 中 base: '/自定义前缀'
  2. 修改 packages/docs/index.md 中 location.pathname = '/自定义前缀/zh-CN/'
  3. 修改 packages/docs/vercel.json 中 "source": "/自定义前缀/(.*)"
  4. 修改 packages/docs/api/proxy.js 中所有的 /vt 改为 /自定义前缀 以及 target = 'https://项目名.vercel.app'

原因：1和2可自定义文档前缀，3和4是因为vercel 需要对请求代理转发，转发静态资源请求至执行路径下请求文件