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 vue@2.6.12 --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. 在页面中使用

 此处 class的值必须包含 markdown-body ，否则样式无法生效！

<Swagger class="markdown-body"/>

最终效果