VuePress 文档站的三个小问题

最近在开发 QQ 机器人和它的管理面板，文档用 VuePress 写。文档里有指令表、配置说明，还有一些面板的截图。搭的时候遇到三个小问题，都不大，记一下。

部署文档后样式丢失

本地 vuepress dev 看着正常，构建后部署上去页面只有裸 HTML，样式和脚本全部 404。

原因是 base 字段。VuePress 用它决定资源路径的前缀，默认是 /，也就是认为站点部署在域名根。我的文档不在根上，前缀就对不上了。

将 docs/.vuepress/config.js 中的 base 字段由绝对地址 / 改为相对地址 ./ 即可，资源路径变成相对当前页面，部署在哪一层目录都能找到。

在 VuePress 中使用 element-ui

文档里想直接用 element-ui 的组件。VuePress 本身是 Vue 应用，可以在应用层做增强：在 docs/.vuepress/ 目录下新建文件 enhanceApp.js，VuePress 启动时会执行它。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(VueRouter);
Vue.use(Element);

Vue.use(Element) 全局注册所有 element-ui 组件，样式文件要单独 import 一次。之后 Markdown 里可以直接写 <el-button> 这类标签。

使用包管理安装对应的包（vue，element-ui）即可。

让 VuePress 支持图片放大

文档里的面板截图比较大，缩在正文列里看不清。VuePress 官方有一个 medium-zoom 插件，点图片可以放大。

使用包管理安装插件 @vuepress/plugin-medium-zoom

yarn add -D @vuepress/plugin-medium-zoom
# OR npm install -D @vuepress/plugin-medium-zoom

在 docs/.vuepress/config.js 中添加

module.exports = {
  plugins: ["@vuepress/medium-zoom"]
}

默认对正文里所有图片生效，不用改 Markdown。