vue展示md檔案,前端讀取展示markdown檔案

包裡的md是什麼

方案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展示在對應的結構塊即可

方案2: 直接讀取static靜態資源MD檔案

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 上先匯入

3。 最後在 vue-markdown 元件上展示即可，記得在 components 上先匯入

還有一個最重要的程式碼部曾經忘記寫了，現在補充上

// 拉取該資料夾下所有檔案資訊

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）；

}）；