vue组件直接读取.md文档展示

Vue.js组件中读取并显示Markdown文件

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

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

26 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

工具专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Vue.js应用中直接读取并显示.md文档内容。通过使用text-loader将Markdown文件转化为文本，然后利用vue-markdown组件进行解析，实现组件内展示Markdown。步骤包括安装text-loader、修改webpack配置、安装vue-markdown、引入组件和Markdown文件。

想要给框架增加一个使用说明，readme已经写了，不想维护两个，但是尝试了好多方法都是报错的，最后终于可以了。

思路就是用text-loader把md文件转换成text，vue-markdown作为组件来解析text。

1、首先安装text-loader

npm install text-loader

2、修改webpack.base.config.js，我用的cli所以自己加了一个vue.config.js

module.exports = {
  //此部分
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.md$/,
          use: ["text-loader"]
        }
      ]
    }
  }
};

3、安装vue-markdown

npm install vue-markdown

3、引入vue-markdown作为组件

import VueMarkdown from "vue-markdown"
components: { VueMarkdown },

4、引入md文件

const articleList = require("../README.md")

5、整体vue

<template>
    <div class="about">
        <vue-markdown :source="md "></vue-markdown>
    </div>
</template>
<script>
import VueMarkdown from "vue-markdown"
const articleList = require("../README.md")
export default {
    name: "about",
    components: { VueMarkdown },
    data() {
        return {
            md: articleList
        }
    },
    mounted() {},
    methods: {}
}
</script>