好久没更新了
真的去干主播了,看到这篇文章记得来dy看我直播,君泽(萤火突击)
找了个班上 最近给了个需求 让我在项目里面 引入md文件转成html
我是搜了又搜都没有适用的
都是项目版本太低了 都是版本不兼容 自己瞎琢磨半天 搞出来了
以下是总结 太懒了 不想做太多书写 只是记录一下 有需求的看看或者了解一下
md文件引入vue中使用
vue2
webpack4.0版本
引入插件
"markdown-loader": "^5.0.0",
"marked": "^5.0.0",
"html-loader": "^0.5.5",
太高的版本 不兼容 尝试多次
vue.config.js 配置
chainWebpack(config){
config.module
.rule('md')
// .test(/\.md/)
.test(/\.md$/)
.use('html-loader')
.loader('html-loader')
.end()
.use('markdown-loader')
.loader('markdown-loader')
.end()
}
然后就可以 import md from './你的md文件.md'
import {marked} from 'marked'
然后
var mdHtml = marked(md);
然后页面
<div v-html="mdHtml"></div>
------------------------------------------------------------------
vue3+vite
vite版本3.0
建议使用
"unplugin-vue-markdown": "^0.26.2",
在vite.config.js里面 引用
import Markdown from 'unplugin-vue-markdown/vite'
export default defineConfig({
plugins: [
vue({
include: [/\.vue$/, /\.md$/],
}),
markdown()
]
});
然后 vue文件里面使用 import md from "./README.md";
注册组件 <script>
export default { components: { md } };
</script>
然后使用 <md/>
以上是简单使用 ,如果还需要高亮 ,找文档看markdown()配置和高亮那个插件
得了
开播去了