vue中读取markdown文件

最新推荐文章于 2025-12-05 15:29:33 发布

原创最新推荐文章于 2025-12-05 15:29:33 发布 · 1.6k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了在Vue2+Webpack以及Vue3+Vite环境下如何读取和使用Markdown文件。对于Vue2，需要依赖'vue2+webpack'，安装'markdown-it-vue'和'vue'库。在Vue组件中可以读取Markdown内容。而对于Vue3，使用Vite搭建的项目，需要'vite', 'vue3'和'vite-plugin-markdown'作为依赖，同样能在组件内处理Markdown文件。" 126489600,15151297,Java毕业设计：雁门关风景区宣传网站源码,"['Java开发', 'Web开发', 'MySQL数据库', '前端框架', '后端开发']

更新于：2023-02-13

vue2+webpack读取markdown文件

依赖项

“markdown-it-vue”: “^1.0.11”
“vue”: “^2.6.10”

在a.vue文件中读取

<template>
  <div class="read-md-demo">
    read MarkDown
    <markdown-it-vue class="read-md-demo" :content="content" />
    <markdown-it-vue class="read-md-demo" :content="md" />
  </div>
</template>
<script>
import MarkdownItVue from "markdown-it-vue";
import "markdown-it-vue/dist/markdown-it-vue.css";
export default {
  name: "readMD",
  components: {
    MarkdownItVue
  },
  data() {
    return {
      content: "# your markdown content",
      publicPath: process.env.BASE_URL,
      md: ""
    };
  },
  created() {
    this.$axios.get(`${this.publicPath}static/network.md`).then(data => {
      console.log(data);
      this.md = data.data;
    });
  }
};
</script>
<style scoped>
.read-md-demo {
  color: white;
}
</style>

vue3+vite读取markdown文件

依赖项

“vite”: “^4.0.0”
“vue”: “^3.2.45”
“vite-plugin-markdown”: “^2.1.0”

在a.vue文件中读取

<template>
  <div v-html="mdHtml"></div>
</template>

<script setup>
import {html as mdData} from '../assets/network.md'

let mdHtml = ref(mdData)
</script>