markdown-it-vue 常见报错快速修复：3 分钟排掉 3 类问题
【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vue
装好 markdown-it-vue 之后页面渲染不出来、demo 起不来？本文覆盖渲染失败排查、安装依赖冲突、端口被占用三个高频卡点，每个都给你自查信号和对应命令，3 分钟走完排查闭环。
👀 一分钟认识 markdown-it-vue
它是基于 Vue 的 Markdown 渲染组件，以 markdown-it 为解析引擎，把 GFM TOC、emoji、语法高亮打包成开箱即用的内置能力，还内置了 mermaid、ECharts、flowchart.js 图表插件与 AsciiMath、LaTeX 公式渲染。
🛠️ 三排障主章节
✅ 渲染异常：先看 options，再看控制台
现象识别：如果你看到组件能挂载、但公式或图表在页面上是纯文本，控制台报katex或mermaid相关错误，就是这个问题。
原因：传给组件的options少了某个插件的 key，插件没被加载。
修复：
- 打开控制台，按报错定位到具体插件；
- 给
options补上该插件的配置，比如公式：
options: { katex: { throwOnError: false } }- 仍无法定位时，把自定义配置清空传空对象，用最小配置排除误配。
验证：看到公式、图表按样式正常显示且控制台没有红色报错，就说明修好了。
🔍 安装依赖冲突：锁版本重装
现象识别：如果你执行安装时 npm 报ERESOLVE或 peer dependency 冲突并直接失败，就是典型的安装依赖冲突。
原因：项目里单独装过较新的 markdown-it，与组件锁定的版本区间互相打架。
修复：
- 直接锁兼容版本重装：
npm install markdown-it@12 markdown-it-vue- 仍卡住就清缓存再装一次：
npm cache clean --force- 还不行，对比两边
package.json的dependencies，找出另一个冲突方。
验证：看到依赖装完、启动时不再提示版本警告，就说明修好了。
🚦 端口被占用：30 秒换掉端口
现象识别：如果你跑npm run dev报EADDRINUSE，或页面打开后一直白屏转圈，就是端口被占用。
原因：8080 端口已被其他进程占着，包括你上一次没关干净的 demo 进程。
修复：
- 直接加端口参数启动：
npx vue-cli-service serve example/main.js --port 8081- 确认是旧进程占位时，先查再杀：
lsof -i :8080 kill -9 <pid>- 想长期生效，就改
package.json里dev脚本的端口。
验证：看到控制台给出新端口的访问地址、预览页能加载，就说明修好了。
📌 收尾：排查顺序一句话
先查版本、再查配置、最后查端口；还不行就打开控制台逐条读报错，绝大多数卡点都写在那里。参考：README 文档、内置插件源码
【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vue
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
