Vue-Press文档知识库搭建部署教程

type

status

date

slug

summary

VuePress

是一个简单易用的静态网站生成器，专门用于创建文档和知识库，其优点在于轻松构建漂亮、快速、可自定义的文档站点。

开源、免费、功能丰富

vuepress-theme-hope

是一个为VuePress提供美观、强大和可定制的主题，为文档和博客站点提供丰富的功能和样式。

Github地址：https://github.com/vuepress-theme-hope/vuepress-theme-hopeopen in new window

官方文档：https://theme-hope.vuejs.press/zh/

部署前提条件

安装宝塔面板

安装 Node.js，版本在 v18.x 以上

Node.js安装npm、yarn模块

已将域名解析到对应站点

安装搭建

打开终端，输入以下命令

💡

文件夹参数

这里的 my-docs 是一个参数，代表 VuePress Theme Hope 项目的文件夹名称，在本教程中，我们将项目生成至当前目录下的 my-docs 文件夹。

如果你有需求，你也可以更改此参数为任意名称（必须英文哈）

中文显示

如果你的英语很不好，在第一次选择语言类型时，通过键盘 ↓ 选择 简体中文 并回车，后续流程中会使用中文进行显示。

选项说明

语言：简体中文

包管理器： npm （推荐）

应用名称：自填（注意只能英文）

版本：1.0.0

应用描述：可留空(在主题设置内可修改)

设置协议MIT：不填（按回车键下一步）

是否需要多语言： N （选Y，会按每个语言构建多个目录）

Github工作流： N

创建项目的类型：Docs （推荐）

使用源：国内镜像源（推荐）

启动服务器

在模板初始化成功后，选择 Yes 立即启动开发服务器，稍等片刻，你就可以在浏览器地址栏输入 localhost:8080/ 访问开发服务器了。

💡

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

构建静态文件

安装完毕后，使用命令构建项目

命令说明：使用构建命令后，会在子目录src/.vuepress/dist 生成静态站点文件如下图

运行目录设置

必须要设置public

文档构建命令

构建和部署命令，需要在项目目录下运行，

正常情况下项目目录下应该存在package.json 这个文件

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

构建命令：

部署命令：

命令说明

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

⚙️其他配置

1、配置搜索栏🔍

需要安装 search 插件，安装插件命令：

然后在 config.ts 文件里引入以下代码

2.更新升级 Vuepress 版本

博主倒腾了好多次都不能升级成功，结果发现原来是 node 版本太低导致的，所以想升级到官方同步的版本，node 一定得升级到 v21.0 版本以上才能升级成功。

查看package json 文件

提示下面版本就是已升级到 Vuepress 2.0版本了

删除 vue 项目中多余依赖

1.先查看有哪些依赖