使用 VuePress 生成静态文档

本文作者：IMWeb HuQingyang 原文出处：IMWeb社区

VuePress 由两部分组成：一部分是支持用 Vue 开发主题的极简静态网站生成器，另一个部分是为书写技术文档而优化的默认主题。它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

1. 安装

npm install -g vuepress

配置需要在文档目录下创建一个.vuepress目录,所有 VuePress 相关的文件都将会被放在这里。终端创建一个文件夹：mkdir .vuepress

其中有一个最重要的文件.vuepress/config.js，网站的所有文件的配置都在这个文件里面，需要创建该文件touch .vuepress/config.js,该文件要导出一个JavaScript对象：

module.exports = {  title: '个人文档',  description: '练习文档'}

现在的目录结构：

.├── .vuepress│   └── config.js└── README.md

vuepress里面，一个md文件就是一个页面，如在下面的目录结构中：

默认主页服务启动后，默认找到的是./README.md文件，也就是http://localhost:8080/
./home1.md该文件在服务中的路径http://localhost:8080/home1.html。在vuepress中配置路径/home1
./page-a/README.md该文件在服务路径：http://localhost:8080/page-a/时默认找的文件。注意URL最后的/不能少，否则会去找./page-a.md文件。
./page-a/a.md该文件在服务的路径：http://localhost:8080/page-a/a.html。注： md文件的文件名可以是中文，但是文件夹名字一定要是英文的。

目前服务启动的只是本地服务，vuepress还可以把文档生成静态html文件项目，部署到服务器或第三方托管网站上。生成最终静态文件命令：

vuepress build .该命令执行完毕后会在.vuepress文件夹下生成dist目录：

该目录里面的文件就是生成的最终静态HTML文件，可把该目录复制到服务器或第三方托管网站部署成自己的文档网站。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。