方案1:每次都需要重新打包,每次修改都需要build
直接使用require + v-html;
核心代码如下:
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展示在对应的结构块即可
<div v-html="htmlMD"></div>
方案2: 直接读取static静态资源MD文件
使用vue-markdown组件 + axios;
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>
还有一个最重要的代码部分忘记写了,现在补充上
// 拉取该文件夹下所有文件信息
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);
});
上面这段代码的意思是:如果获取某个文件夹下面的所有md文件,拿到整个文件夹的信息后可以用于生成侧边栏以及别的操作
欢迎关注博主:微信公众号交流,不定时更新前端资源