vue项目中渲染markdown并处理报错几种方式

前言：想在vue项目中渲染markdown并处理报错问题

有以下几种方式：

1、使用第三方Markdown插件

2、通过Markdown转HTML工具

3、使用Vue组件处理Markdown

一、首先第一种：使用第三方Markdown插件

安装vue-markdown插件 或者 markdown-it，两种各有利弊

应用场景

• ‌vue-markdown‌：专为Vue.js设计，能够快速地将Markdown文本转换为HTML，并且支持多种Markdown语法扩展，如表格、任务列表、脚注、数学公式等。它适用于需要在Vue项目中轻松集成Markdown支持的场景‌
• ‌markdown-it‌：是一个高度可配置的Markdown解析器，支持通过插件扩展功能。它具有高性能、可扩展性和灵活性，可以轻松集成到各种
• JavaScript框架中，如Vue、React等。markdown-it适用于需要高性能解析和渲染Markdown内容的场景‌

功能特点

‌vue-markdown‌：

• ‌高性能‌：能够快速将Markdown文本转换为HTML。
• ‌支持多种语法扩展‌：包括表格、任务列表、脚注、数学公式等。
• ‌易于集成‌：专为Vue.js设计，使用简单方便‌

‌markdown-it‌：

• ‌高性能‌：快速解析和渲染Markdown内容。
• ‌高度可配置‌：支持通过插件扩展功能，兼容CommonMark规范，并可配置以支持其他Markdown扩展。
• ‌灵活性‌：可以轻松集成到各种JavaScript框架中‌

二、通过Markdown转HTML工具

1、安装Markdown转HTML工具 marked

2、编写转换逻辑

3、在Vue组件中渲染HTML内容

错误问题：markdown-it Can’t import the named export ‘P’ from non EcmaScript module

这是在webpack当中没支持mjs后缀导致

{
    test: /\.mjs$/,
    include: /node_modules/,
    type: 'javascript/auto'
},

总结 

到此这篇关于vue项目中渲染markdown并处理报错几种方式的文章就介绍到这了,更多相关vue渲染markdown处理报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！