vitepress部署流程

为了养成良好的笔记习惯，在学习之前先部署自己的博客系统，以下以vitepress的部署为例

vitepress官方文档地址https://vitepress.dev/zh/

一、安装

安装使用前应有以下环境：

==安装前==
应已配置Node.js 18 及以上版本。下载好vscode，并打开终端
==使用前==需支持 Markdown 语法的编辑器，推荐 VSCode 及其官方 Vue 扩展

安装命令
vitepress可以安装在现有项目中，作为开发文档或者官方文档，也可以单独作为独立项目使用
vitepress的安装命令为
```
npm add -D vitepress@next
```
若作为独立基础项目使用，还应该运行构建命令
```
npx vitepress init
```

将需要回答几个简单的问题：

┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Where should VitePress look for your markdown files?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
◇  Add a prefix for VitePress npm scripts?
│  Yes
│
◇  Prefix for VitePress npm scripts:
│  docs
│
└  Done! Now run pnpm run docs:dev and start writing.

==tips：==
./docs就是vitepress项目中你用来存放平时笔记以及vitepress基础配置的地方，你也可以起其他名字。
./的意思是当前文件夹，../的意思是当前文件夹的上一层文件夹

二、项目的启动运行

项目启动命令：npm run docs:dev

这个网址就是项目在本地跑起来的地址==按住ctrl+鼠标左键点击==即可直接打开

这个时候我们来看一下目录结构

目录结构如下：

├─ docs
│  ├─ .vitepress
│  │  └─ config.js            //vitepress配置文件       
│  ├─ api-examples.md         //vitepress相关配置教程
│  ├─ markdown-examples.md    //markdown语法使用教程
│  └─ index.md                //网站首页，入口文件
└─ package.json               //npm脚本命令配置，用来写启动命令，默认已有

==docs：==

.md文件

可以看到docs文件夹内有三个.md结尾的文件，每个 .md 文件将在相同的路径被编译成为 .html 文件，意思就是你写在docs文件夹里的每一个以.md结尾的文件都会在打包后成为一个单独的页面，而你一整个项目相当于一个网站，这三个单独页面就是一个网站里的三个页面。比如说上面的目录结构中，docs文件夹下有三个以.md结尾的文件，所以在http://localhost:5174/这个网址内，有三个对应的网址：

http://localhost:5174/index              ========>         对应的是index.md
http://localhost:5174/api-examples       ========>         对应的是api-examples.md
http://localhost:5174/markdown-examples  ========>         对应的是markdown-examples.md

.vitepress/config.js文件

这个config即vitepress的配置文件，比如设置网站的title、网站的导航、网站的脚标等，修饰细节自己摸索美化。

==package.json：==

中有三个已经配置项好的东西：

{
  ...
  "scripts": {
    "docs:dev": "vitepress dev docs",           //项目启动命令，把项目/软件跑起来
    "docs:build": "vitepress build docs",       //项目打包命令，把整个写好的东西打包成可以用来部署的东西
    "docs:preview": "vitepress preview docs"    //项目预览命令，预览你打包好的东西
  },
  ...
}

这三个东西只要知道是什东西即可，我们怎么去运行这个命令呢

项目启动命令：npm run docs:dev
项目打包命令：npm run docs:build
项目预览命令：npm run docs:preview

三、项目的打包

上面讲到，项目的打包命令是npm run docs:build

现在我们运行一下这个命令看发生了什么：

运行结束后我们可以看到成功提示build complete，同时，在docs文件夹下的.vitepress下，多了一个dist文件夹，这就是项目打包后的结果

而这个dist文件夹内的打包结果具体是什么样的呢？

我们可以看到，我们在项目中存在的三个以.md结尾的文件都变成了后缀为.html的文件，这就是前面我们说的一个.md对应一个单独的页面。

其他的内容则是vitepress这个项目帮你自带的一些处理，比如访问一个不存在的页面，给你自动跳转到404.html。这些你们暂时都不需要非常清楚。

现在你知道了，把一个.md文件写在docs文件夹里可以生成一个页面，那如果是在dos文件夹里创建一个文件夹，再写一个.md文件呢，会得到什么

我们可以惊喜的发现，在http://localhost:5173/test/test 路径下出现了测试页面，我们可以把docs文件夹内的.md文件，文件路径和网页路径对应上，docs文件夹里的test文件夹里的test.md,在网页里是http://localhost:5173/test/test

vitepress部署流程 ​

一、安装 ​

二、项目的启动运行 ​

三、项目的打包 ​

vitepress部署流程

一、安装

二、项目的启动运行

三、项目的打包