vue2/3展示.md文件

ps:

• vue展示md文件只有展示功能，不能对md文件进行修改
• vue使用第三方插件编译的md文件，不会有对应样式。
• 不要使用vue-markdown-loader插件的方案，因为vue3打包会报错

markdown-loader html-loader实现步骤(vue2/3都可以)

1. 下载插件

npm i markdown-loader html-loader highlight.js github-markdown-css -D

2. 插件配置 vue.config.js

const {
  defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
  chainWebpack: config => {
    config.module
      .rule('md')
      .test(/.md$/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('markdown-loader')
      .loader('markdown-loader')
      .end()
  }
})

3. 引入

<template>
  <div class="markdown-body">
    <div v-html="md"></div>
  </div>
</template>

<script>
import md from './assets/烽台-node.md'
export default {
  data() {
    return {
      md: md
    }
  },
};
</script>

vue-markdown-loader实现步骤(vue2可以使用)

1. 下载插件 vue-markdown-loader

npm i vue-markdown-loader -d

2. 插件配置 vue.config.js

module.exports = defineConfig({
  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页面引入.md文件

// 引入后打开页面就可以看到md文件内容，但是样式是没有的
<template>
  <div class="markdown-body ">   // 这个类名是必要的，与样式相关
    <md></md>
  </div>
</template>

<script>
import md from './assets/xxx.md'
export default {
  components: { md },
};
</script>

4. 下载样式插件 github-markdown-css highlight.js

npm i github-markdown-css highlight.js -d

5. 引入样式文件如果没有生效的话，就重启项目。查看引入的md文件的组件上层元素是否有.markdown-body类名

// main.js
// markdown样式
import 'github-markdown-css'
// 代码高亮
import 'highlight.js/styles/github.css'