Vue处理markdown

最新推荐文章于 2025-03-11 14:17:32 发布

ajh99990

最新推荐文章于 2025-03-11 14:17:32 发布

阅读量635

点赞数

分类专栏：经验总结与分享文章标签：经验总结 vue MarkDown

本文链接：https://blog.youkuaiyun.com/ajh99990/article/details/103031948

版权

经验总结与分享专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在Vue项目中处理Markdown文件，通过安装并配置html-loader、markdown-loader以及marked，结合vue.config.js设置自定义规则，将Markdown表格解析为el-table组件，以利用Element UI的美观效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步

安装html-loader和markdown-loader以及marked
npm i html-loader markdown-loader -D
npm i marked -save

第二步

在vue.config.js中配置两个loader

const path = require("path");
const marked = require("marked");
const renderer = new marked.Renderer();

module.exports = {
    productionSourceMap: false,
    chainWebpack: config => {
        config.module.rule('md')
            .test(/\.md/)
            .use('html-loader')
            .loader('html-loader')
            .end()
            .use('markdown-loader')
            .loader('markdown-loader')
            .options({
                pedantic: true,
                renderer
            })
    }
}

第三步

使用v-html，以便将markDown解析后产生的html显示在页面上

<template>
  <div class="ys-introduction">
    <div class="card">
      <div v-html="contentText"></div>
    </div>
  </div>
</template>

<script>
import marked from "marked";
export default {
  name: "YuShengIntroduction",
  data() {
    return {};
  },
  computed: {
    contentText() {
      return marked(require("@/assets/baseInfo.md"));
    }
  }
};
</script>

自定义规则

markdown-loader使用的是marked插件，因此我们同样可以使用marked的选项与方法。
我的需求是在解析表格的时候，不解析成table标签，而是解析成el-table。el-table是element-ui的表格组件，它更美观一些。具体做法这篇博客有介绍。
https://www.cnblogs.com/djtao/p/6224399.html