vue展示md文件，前端读取展示markdown文件

方案1:每次都需要重新打包，每次修改都需要build

　　直接使用require + v-html；

[](javascript:void(0)😉

核心代码如下：　　
　　1. 首先需要添加MD文件的loader就是 markdown-loader
　　　　npm install --sava markdown-loader

　　2. 然后require加载对应的资源,也可以通过ajax获取资源对象
　　　　this.htmlMD = require('./xxx.md');
　　　　　　或
　　　　axios.get(url).then((response) => {　　　　　　
　　　　　　this.htmlMD = response.data;
　　　　});
　　3. 最后通过v-html展示在对应的结构块即可

　　　　　

[](javascript:void(0)😉

方案2: 直接读取static静态资源MD文件

　　使用vue-markdown组件 + axios；

[](javascript:void(0)😉

　　1. 首先下载 vue-loader 和 vue-markdown 组件

　　npm install --sava markdown-loader vue-markdown

　　2. 然后获取对应的资源对象

　　const url = `./xxx.md`;
　　axios.get(url).then((response) => {
   　　this.htmlMD = response.data;
　　});

　　3. 最后在 vue-markdown 组件上展示即可，记得在 components 上先导入

　　<VueMarkdown :source="htmlMD"></VueMarkdown>

[](javascript:void(0)😉

还有一个最重要的代码部分忘记写了，现在补充上

[](javascript:void(0)😉

// 拉取该文件夹下所有文件信息
const filesMD = require.context('@/../static/xxxxMD', true, /\.md$/);
const filesMDNames = filesMD.keys();
const tmepListDatas = [];
filesMDNames.map((item) => {
    const listObj = {};
    const listItemS = item.split('/');
    if (listItemS.length > 0) {
        listObj.name = listItemS[1].replace('.md', '');
        listObj.path = item;
        listObj.children = [];
        listObj.showChild = false;
    }
　　return tmepListDatas.push(listObj);
});                

[](javascript:void(0)😉

上面这段代码的意思是：如果获取某个文件夹下面的所有md文件，拿到整个文件夹的信息后可以用于生成侧边栏以及别的操作

转发自：https://www.cnblogs.com/ChineseLiao/p/11079080.html