vue 加載展示md檔案（markdown文法 .md字尾的檔案）

 目錄

​​1. 安裝依賴包​​

​​ 2. 在vue.config.js中添加配置​​

​​3. 導入樣式​​

​​ 4. 導入md檔案​​

​​ 5. 注冊為元件​​

​​ 6. 在頁面中使用​​

​​最終效果​​

1. 安裝依賴包

npm i vue-markdown-loader -D
npm i  vue-loader vue-template-compiler -D
npm i github-markdown-css -D
npm i highlight.js -D      

 若報錯 Vue packages version mismatch，則安裝與 vue-template-compiler 版本一緻的vue即可

npm install [email protected] --save      

 2. 在vue.config.js中添加配置

chainWebpack: config => {
        config.module.rule('md')
            .test(/\.md/)
            .use('vue-loader')
            .loader('vue-loader')
            .end()
            .use('vue-markdown-loader')
            .loader('vue-markdown-loader/lib/markdown-compiler')
            .options({
                raw: true
            })
    }      

3. 導入樣式

在 .vue 檔案中局部導入，或在 main.js 中全局導入

import 'github-markdown-css'
    import 'highlight.js/styles/github.css'      

 4. 導入md檔案

import Swagger from './md/Swagger.md'      

 5. 注冊為元件

components: {
    Swagger
},      

 6. 在頁面中使用

<Swagger class="markdown-body"/>      

最終效果