升级

Vuepress 终于进入了预发布阶段，本文将介绍如何升级到 Vuepress2.0.0-RC.8。

---

安装 Vuepress2.0.0-RC.8

mkdir -p vuepress2.0.0-RC.8 && cd vuepress2.0.0-RC.8
yarn init
yarn add -D vuepress@next     # 安装 vuepress
yarn add -D @vuepress/bundler-vite@next @vuepress/theme-default@next       # 安装打包工具和主题

安装插件

npm i -D @vuepress/plugin-copy-code@next
npm i -D @vuepress/plugin-container@next
npm i -D @vuepress/plugin-docsearch@next
npm i -D @vuepress/plugin-pwa@next
npm i -D @vuepress/plugin-sitemap@next

复制文件

• 将原来的 vuepress 里的文章复制到 vuepress2.0.0-RC.8/docs 下
• 如果有问题记得删除 docs/.vuepress/{.cache,.temp} 这两个文件

配置 Vuepress

• Git 配置

  •   .vuepress/.temp
      .vuepress/.cache
      .vuepress/dist
      node_modules
      .vscode
      .idea
      .git
      secretKeyConf.js

• seo 爬虫配置

  •   User-agent: *
      Allow: /

开始使用 Vuepress

在 package.json 中添加一些 scripts:

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy": "bash deploy.sh"
  }
}

• 启动开发服务器: yarn docs:dev
• 构建项目: yarn docs:build

FAQ

Vuepress2.0.0.0-RC.8 有什么不同？

• 原来的 vuepress-plugin-anchor-right 插件无法使用了，选择用默认主题提供的 语法加上自定义 CSS 来实现，但无法实现标题栏 active 后的效果，缺点是：每篇文件都要添加 标签。
• permalink 设置失效：假如有一篇文章文件名叫: 前端环境配置.md 其通过 Frontmatter 语法: permalink: /Inbox/how-to-use-vuepress/yarnandnodejs 生成永久链接，然后在 md 文件中通过 [安装 vuepress 前的环境准备](./pages/前端环境配置.md) 无法跳转到该文章的永久链接，提示 404,它默认生成的是 http://localhost:8080/Inbox/vuepress/pages/前端环境配置.html,只有注释掉文章的 permalink 才能跳转，这样就导致原来的 siderbar 规则也生效

我做了什么？

• 目录结构调整: 假如我有 vuepress 系列文章，新建 Inbox/vuepress 目录，这个目录用来存储 vuepress 总路由文件,即 README.md，然后创建 Inbox/vuepress/pages 目录，用来存储该系列的所有文章。
• sidebar 设置：新增 '/Inbox/vuepress/pages' 规则，指向 pages 下的每个文件。
• 文件名全改为英文，不再使用中文命令，因为 vuepress 默认是按文件名生成 .html 文件，但浏览器会对中文进行编码，对 seo 不友好。

Links

• 相关文章: 升级到 Vuepress2.0.0-beta.61