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