如何理解vitepress以及怎么将vuepress升为vitepress，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
在vue3之前相信大家都用过或者听过vuepress，它是一个基于vue的静态网站生成器，可以用来写文档的。具体内容可以看VuePress官网。
但是现在有了vue3，也有了vite，然后就有了一个建立在vite之上的vitepress。（vitepress产生的动机可以去看官网，有说明）。
基于vite而不是webpack，所有更快的启动时间，热重载等
使用vue3来减少js的有效负载
.vitepress/config.js
利用了vue3的改进的模板静态分析来尽可能字符串化静态内容
使用了vite
更快的dev服务启动
热更新更快
构建更快（使用了Rollup）
vue 3 树摇 + Rollup 代码分离
不会把所有页面的元数据都在一个请求中发送出去。客户端导航时再一起获得新页面的组件及元数据
没有用vue-router
（WIP）i18n本地化数据根据需要请求
vitepress少的配置。vitepress目标是所减掉当前vuepress的复杂性并从极简主义的根源重新开始
是面向未来的：其目标浏览器是只支持原生ES模块导入的浏览器。鼓励使用原生的js而不是用转义以及使用css变量来主体化
以下使用的vitepress是v0.20.0的版本
1、安装vitepress
npm install vitepress
原来在使用vuepress的时候肯定会有一个docs文件夹（如果没有的话就可以自己创建一个）。
2、更改入口文件为index.md
注意：vuepress的入口文件是docs/readme.md,而vitepress的入口文件是index.md,所以这个地方要改一下原来readme的名字如果index.md没有其他内容，可以添加一些简单内容
计算
安全
数据库
网络和加速
企业服务
---
home: true
title: 主页
lang: en-US
heroText: BIFE文档库
tagline: 这是你的舞台，期待你的精彩
actionText: Get Started
actionLink: /新人须知/first-day
footer: MIT Licensed | Copyright © 2021-present CoolDream
---3、配置vitepress信息
创建.vitepress文件夹
在.vitepress下创建配置文件config.js
在config.js中添加配置信息
export default {
base: '', // 项目的基础路径
title: '文档', // 文档的标题，会显示在
description: '前端技术文档', // 文档描述
lastUpdated: '上次更新时间', // string | boolean
}4、如果想要添加顶部的右侧导航，可以在themeConfig中添加
module.exports = {
themeConfig: {
// 顶部右侧导航
nav: [
{ text: 'Home', link: '/first-day' },
{
text: 'Components',
link: '/test'
},
],
}
}注意：nav中的导航链接需要跟链接的文件名字一致，区分大小写
5、添加左侧导航,也是在themeConfig中添加
需要注意
vuepress的链接children中是具体的链接，而显示的导航名称是每一个.md文件中的title
而vitepress的children中是一个对象数组，text表示导航名称，link才是真正的链接
如果有多个路由的话，一定要把默认的路由写在最后
module.exports = {
themeConfig: {
// 侧边栏
sidebar: [
'/CHANGLOG':[
{
text: '更新日志'
}
],
'/': [
{
text: '新人须知',
children: [
{
text: '入职第一天',
link: '/first-day'
},
{
text: '入职第一周',
link: '/first-week'
}
]
}
]
],
}
}6、添加脚本到package.json中
"scripts": {
"dev": "vitepress dev docs",
"build": "vitepress build docs",
"notice": "sh scripts/notice.sh"
},7、卸载vuepress
npm uninstall vuepress
最初的时候把默认路由写在了最前面，发现切换路由的时候路由没有更新，还是默认的路由，后来发现需要把默认路由写在最后
themeConfig:{
// 侧边栏
sidebar: {
// 其他路由在前
'other-router':[],
// 默认路由在最后
'/': [
{
text: '新人须知',
children: [
{
text: '入职第一天',
children: [
{text: '电脑'}
]
}
]
}
]
}
}数据类型后不能要空格，报错的行数一点都对不上，导致找问题找了好久），具体如下图
vitepress会把路径的最后一级路径转换为*.html（如果是以/结尾的话，回去找文件夹下的index.md）,如果是其他文件类型，如果*.txt，会导致找不到文件
如果在markdown中有这样的链接格式[技术分享](/技术分享/WebComponents/),在npm run build的时候是会报错的，报错信息如下图，此时改用<a href="">标签链接就行
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
