vue 加载本地md文件

package依赖：

"@bytemd/vue": "^1.21.0", //字节vue解析md 库
"html-loader": "^1.0.0",  //vue html loader 解析
"markdown-loader": "^7.0.0", // vue markdown 文件解析
"juejin-markdown-themes": "^1.34.0", //md主题 依赖

vue.config.js loader配置：

module.exports = {

    configureWebpack: {
    
    module: {
      rules: [
        // 配置读取 *.md 文件的规则
        {
          test: /\.md$/,
          use: [
            { loader: "html-loader" },
            { loader: "markdown-loader", options: {} }
          ]
        }
      ]
    }
  }

}

main.js 引入md 样式

//md主题
import 'juejin-markdown-themes/dist/juejin.min.css'

vue组件：

<template>
  <div >
    <Viewer class="viewer" :tabindex="2" :value="value"></Viewer>
  </div>
</template>

<script>
import { Viewer } from '@bytemd/vue';

export default {
  components: {
    Viewer
  },
  data() {
    return {
      value: require('@/assets/md/xxx.md'), // 获取的markdow文档内容
    };
  },
  methods: {
  
  }
};
</script>