Vue3将md转为html显示在页面

其实之前的时候有想过这个问题，但是当时从网上搜索了一番确实是毫无结果。但是最近我在写自己的个人博客，在过程当中也遇到了这样的需求，本着有问题解决问题的原则，盘他。

首先我使用的环境是Vue3 + JS，各位酌情分析自己的情况，毕竟情况不同结果也会有点出入或者是根不能实现效果反而起到了反作用。接下来就是正片：

首先需要大家根据我的package.json安装如下用红色部分圈起来的包，大家也要注意一下安装包的方式

接下来安装的包是需要添加 -D / --save-dev 这样的命令的，红线划掉的是不需要的，大家也要考虑一下版本兼容问题，如果在安装过程中出现版本警告，建议是查找对应版本下载安装。

然后在vue.config.js当中进行如配置

const { defineConfig } = require("@vue/cli-service");
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, // 这里我关闭了语法检查，有需要打开的删除掉即可
  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,
      });
  },
});

然后就是引入md文档并注册，是的，你没看错，在.vue文件当中引入.md并在components当中注册，代码如下

<template>
  <div class="markdown-body">
    <md></md>
  </div>
</template>
<script>
import "github-markdown-css"; // markdown样式
import "highlight.js/styles/github.css"; // 代码高亮
import md from "../../md/Blog.md";
export default {
  name: "Blog",
  components: {
    md,
  },
};
</script>

<style lang="less" scoped>
// @import url('../../assets/css/markdown.less'); // 这里可以修改markdown-body的样式

</style>

到这里我就可以正常运行出来了，如下