vue 加载本地md文件

PrinciplesMan

于 2024-04-17 16:11:30 发布

阅读量182

点赞数 1

文章标签： vue.js 前端 javascript md markdown

本文链接：https://blog.csdn.net/u010227042/article/details/137876929

版权

本文介绍了如何在Vue项目中管理Markdown依赖，如@bytemd/vue、html-loader、markdown-loader等，并详细展示了如何在vue.config.js中配置Webpack以处理.md文件，以及如何在main.js中引入Markdown样式并使用Vue组件显示Markdown内容。

摘要由CSDN通过智能技术生成

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>