构建知识库内容

vuepress系统支持以Markdown文档作为源文件，运行构建命令后会自动将Markdown的后缀文件.md 转换为网页形式的HTML

构建命令

提示

构建和部署命令，需要在项目目录下运行，正常情况下项目目录下应该存在package.json这个文件

---

要将编写好的文档，生成知识库网页，需要运行以下命令

1. 构建命令：

npm run docs:build

2. 部署命令

npm run docs:dev

命令说明

在项目的目录下package.json文件内指定了vuepress的运行命令，可以要求更改命令结构

默认配置

默认的package.json配置

{
  "name": "help560",
  "version": "1.0.0",
  "description": "A project of vuepress-theme-hope",
  "license": "MIT",
  "type": "module",
  "scripts": {
    "docs:build": "vuepress build src",
    "docs:clean-dev": "vuepress dev src --clean-cache",
    "docs:dev": "vuepress dev src",
    "docs:update-package": "yarn dlx vp-update"
  },
  "devDependencies": {
    "@vuepress/client": "2.0.0-beta.67",
    "vue": "^3.3.4",
    "vuepress": "2.0.0-beta.67",
    "vuepress-theme-hope": "2.0.0-beta.237"
  }
}

配置说明：

• 构建项目并输出：docs:build
• 启动开发服务器：docs:dev

命令优化

默认配置将构建和部署分成2个不同的命令，每次更新知识库内容需要按顺序先运行docs:build 再运行docs:dev 才能成功部署

通过修改可以将指令更改的更简单，例如将指令修改为：

    "docs:1": "vuepress build src",
    "docs:2": "vuepress dev src",
    "docs:a": "vuepress build src && vuepress dev src"

指令说明：

• 将原来的构建指令由docs:build改为docs:1
• 将原来的启动指令由docs:dev改为docs:2
• 增加同时构建和启动指令docs:a

修改后的package.json文件内容为：

{
  "name": "help560",
  "version": "1.0.0",
  "description": "五六零知识库",
  "license": "MIT",
  "type": "module",
  "scripts": {
    "docs:1": "vuepress build src",  //修改构建命令
    "docs:clean-dev": "vuepress dev src --clean-cache",
    "docs:2": "vuepress dev src",  //修改启动命令
    "docs:update-package": "yarn dlx vp-update",
    "docs:a": "vuepress build src && vuepress dev src"  //新增同时构建+启动的命令
  },
  "devDependencies": {
    "@vuepress/client": "2.0.0-beta.67",
    "vue": "^3.3.4",
    "vuepress": "2.0.0-beta.67",
    "vuepress-plugin-search-pro": "^2.0.0-beta.237",
    "vuepress-theme-hope": "2.0.0-beta.237"
  }
}

总结

至此，每次编写完知识库文档后，可用以下指令自动构建和部署

yarn docs:a