vue：vue-cli渲染markdown文件

Vue中Markdown文件的加载与显示

最新推荐文章于 2025-10-17 16:04:07 发布

原创最新推荐文章于 2025-10-17 16:04:07 发布 · 768 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue渲染markdown文件

vue 专栏收录该内容

56 篇文章

订阅专栏

本文介绍如何在Vue项目中配置并使用Markdown文件，包括安装必要的依赖、配置vue.config.js以及在.vue文件中正确引入和显示.md文件的方法。

看演示：一定要看到文末！
在这里插入图片描述

步骤：

安装依赖：npm i vue-markdown-loader -D、npm i github-markdown-css -S 、npm i highlight.js -S
配置vue.config.js

module.exports={
      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
          })
      },
}

在.vue文件中引入.md文件及相关样式

<!-- 开发文档之页面搜索组件 -->
<template>
    <div class="markdown-body">
      <md />
    </div>
  </div>
</template>

<script>
import md from '@/components/page-search/readme.md';
import 'highlight.js/styles/github.css';
import 'github-markdown-css';

export default {
  name: 'pageSearchDocument',
  components: { md },