在uniapp中如何導入markdown文件,同時在頁面中解析成html,請參考以下配置:
1. 安裝以下3個依賴包
npm install marked highlight.js vite-plugin-markdown
2. 創建vite.config.js配置文件
// vite.config.js
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import { plugin as mdPlugin } from 'vite-plugin-markdown';export default defineConfig({plugins: [uni(),mdPlugin({mode: 'html', // 將 .md 轉換為 HTML 字符串markdown: (body) => {// 自定義解析邏輯(如代碼高亮)const marked = require('marked');const hljs = require('highlight.js');marked.setOptions({highlight: (code) => hljs.highlightAuto(code).value});return marked.parse(body);}})],assetsInclude: ['**/*.md'] // 聲明 .md 為靜態資源
});
3. 在dCloud插件市場安裝以下uniapp markdown語法渲染及代碼高亮 - DCloud 插件市場
4. 在工程頁面中引入markdown格式文件并渲染
<template><view class="container"><ua-markdown :source="Example1" show-line="false" /></view>
</template>
<script setup>// 導入 .md 文件(需配置 ?raw 后綴)import Example1 from './customer.md?raw'
</script>
導入md文件時必須加?raw,配置完成后重新啟動一下開發服務即可!!!