VuePress使用踩过的坑（一）

前言

VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。致力于轻量级的文档框架，是基于vue之上的二度开发，但是在使用的时候也遇到过不少的问题，下面小谭鸡米花就把我在开发过程中遇到的常见问题列举出来，希望对大家有所帮助。

---

1.动态文档

实际开发中，会遇到多个文档的情况，要求提供一个侧边栏进行区块化，用户需要看哪一块的文档就现实哪一块的内容，这就涉及到将md文件在页面中展示并且动态更改。

首先，先解决md在页面显示的问题，这里小谭用的是插件，由于vuepress自带的md转换是无法支持模块化转换的，所以这里小谭选择使用第三方插件：v-md-editor

使用的话就是先下载

# use npm
npm i @kangc/v-md-editor -S

# use yarn
yarn add @kangc/v-md-editor

下载之后再根据需求引入不同的css样式，以及全局注册，页面上使用可以参考如下：

<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
  export default {
    data() {
      return {
        text: '',
      };
    },
  };
</script>

这时我们就只用更改text的值就可以实现动态文档的展示了。

---

如果提供的文档格式为字符串的话，到这里基本上就可以实现了，但是如果提供的文档格式为静态文件（如.txt、.md），就需要解决请求文件拿到静态文件的内容

首先要注意的是，静态文件的存放位置请务必放置于.vuepress/public目录之下，否则编译过后会出现范围不到资源的情况；其次我们可以写一个请求静态文件的通用方法，可以参考如下：

export const requestStaticFile = (url) => {
  return request({
    url,
    headers: { "access-control-allow-origin": "*" },
    responseType: "blob",
    method: "get",
  });
};

传入一个url拿到对应的文件，需要注意的是，url地址不能为相对路径，要为绝对路径；比如请求的文件放置的位置为.vuepress/public/a.md；那么不管在哪个位置需要请求改文件，url的值则为：./a.md。

拿到文件资源之后需要再进行转换，将其转为字符串类型，可以参考如下：

let that = this;
requestStaticFile(url).then((res) => {
  let blob = new Blob([res.data]);
  let file = new File([blob], "test.md");
  var reader = new FileReader();
  reader.onloadend = function (evt) {
    if (evt.target.readyState == FileReader.DONE) {
      that.text = evt.target.result;
    }
  };
  // 包含中文内容用gbk编码
  reader.readAsText(file, "UTF-8");
});

---

2.文件预览

我在项目中遇到过要求静态文件预览的问题，就是将PDF，word，Excel格式的文件在页面上预览，我们就一步步解决

2.1 PDF预览

PDF预览相对于其他两种格式文件来说简单很多，只需在页面中嵌套一个iframe，再将地址指向即可，可以参考如下：

<iframe  :src="src"  frameborder="0" width="100%" height="600px"></iframe>

---

2.2 word预览

word预览我这边借助的插件docx-preview

首先安装插件

npm i docx-preview -S

注意，引入此插件需要在mounted生命周期中引入，否则打包会报错！如果用的是vue，可以忽略。引入方式可以参考如下：

<template>
  <div >
    <div ref="file"></div>
  </div>
</template>
<script>
let docx = null;
export default {
  mounted() {
    docx = require("docx-preview");
    window.JSZip = require("jszip");
  }
}
</script>

这时就可以将文件传入，继续调用requestStaticFile方法请求静态文件，文件存放位置以及url地址的值同第一段内容，这里自己上方法：

requestStaticFile(url).then((res) => {
      const blob = new Blob([res.data]);
      docx.renderAsync(blob, this.$refs.file);
});

---

2.3 Excel预览

Excel预览小谭使用的是LuckyExcel插件，使用方法：

安装插件

npm install luckyexcel

组件中引入

import LuckyExcel from 'luckyexcel';
import { asynLoad } from"@/utils/excel";//方法如下

页面结构：

<div id="luckysheet"></div>

//调用loadPlugins进行初始化并且展示表格
loadPlugins() {
  const baseURL = "//cdn.jsdelivr.net/npm/luckysheet@latest/dist";
  Promise.all([
    asynLoad(`${baseURL}/plugins/css/pluginsCss.css`, true),
    asynLoad(`${baseURL}/plugins/plugins.css`, true),
    asynLoad(`${baseURL}/css/luckysheet.css`, true),
    asynLoad(`${baseURL}/assets/iconfont/iconfont.css`, true),
    asynLoad(`${baseURL}/plugins/js/plugin.js`),
    asynLoad(`${baseURL}/luckysheet.umd.js`),
  ])
    .then(() => {
      luckysheet = window.luckysheet;
      this.getOriginFile(); // 获取远端文件
    })
    .catch((res) => {});
},

getOriginFile() {
  requestStaticFile(文件地址).then((res) => {
    const blob = new Blob([res.data]);
    const file = new File([blob], this.fileName);
    this.init(file); // 开始渲染
  });
},

// 渲染方法，接受文件对象，如果是本地文件直接传入文件即可
init(file) {
  luckysheet.destroy(); // 先销毁当前容器
  LuckyExcel.transformExcelToLucky(file, (exportJson) => {
    if (exportJson.sheets === null || !exportJson.sheets.length) {
      this.$message.error("无法读取excel文件的内容,当前不支持xls文件!");
      return;
    }
    luckysheet.create({
      container: "luckysheet",
      showinfobar: false,
      lang: "zh",
      data: exportJson.sheets,
      title: exportJson.info.name,
      userInfo: exportJson.info.name.creator,
    });
  });
},

另外附上/utils/excel中的asynLoad方法：

export function asynLoad(src, isCss = false) {
  return new Promise(res => {
    let el;
    if (isCss) {
      el = document.createElement('link');
      el.rel = 'stylesheet';
      el.href = src;
    } else {
      el = document.createElement('script');
      el.src = src;
    }
    document.documentElement.appendChild(el);
    el.onload = el.onreadystatechange = function() {
      if (
        !this.readyState ||
        this.readyState == 'loaded' ||
        this.readyState == 'complete'
      ) {
        res(true);
      }
      this.onload = this.onreadystatechange = null;
    };
  });
}

---

好啦，今天先说到这里啦，剩下的坑等我过两天整理出来再发布