前言：想在vue項目中渲染markdown并處理報錯問題

有以下幾種方式：

1、使用第三方Markdown插件

2、通過Markdown轉(zhuǎn)HTML工具

3、使用Vue組件處理Markdown

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

安裝vue-markdown插件 或者 markdown-it，兩種各有利弊

應(yīng)用場景

• ‌vue-markdown‌：專為Vue.js設(shè)計，能夠快速地將Markdown文本轉(zhuǎn)換為HTML，并且支持多種Markdown語法擴(kuò)展，如表格、任務(wù)列表、腳注、數(shù)學(xué)公式等。它適用于需要在Vue項目中輕松集成Markdown支持的場景‌
• ‌markdown-it‌：是一個高度可配置的Markdown解析器，支持通過插件擴(kuò)展功能。它具有高性能、可擴(kuò)展性和靈活性，可以輕松集成到各種
• JavaScript框架中，如Vue、React等。markdown-it適用于需要高性能解析和渲染Markdown內(nèi)容的場景‌

功能特點

‌vue-markdown‌：

• ‌高性能‌：能夠快速將Markdown文本轉(zhuǎn)換為HTML。
• ‌支持多種語法擴(kuò)展‌：包括表格、任務(wù)列表、腳注、數(shù)學(xué)公式等。
• ‌易于集成‌：專為Vue.js設(shè)計，使用簡單方便‌

‌markdown-it‌：

• ‌高性能‌：快速解析和渲染Markdown內(nèi)容。
• ‌高度可配置‌：支持通過插件擴(kuò)展功能，兼容CommonMark規(guī)范，并可配置以支持其他Markdown擴(kuò)展。
• ‌靈活性‌：可以輕松集成到各種JavaScript框架中‌

二、通過Markdown轉(zhuǎn)HTML工具

1、安裝Markdown轉(zhuǎn)HTML工具 marked

2、編寫轉(zhuǎn)換邏輯

3、在Vue組件中渲染HTML內(nèi)容

錯誤問題：markdown-it Can’t import the named export ‘P’ from non EcmaScript module

這是在webpack當(dāng)中沒支持mjs后綴導(dǎo)致

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

總結(jié) 

到此這篇關(guān)于vue項目中渲染markdown并處理報錯幾種方式的文章就介紹到這了,更多相關(guān)vue渲染markdown處理報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論