在Vue/Vite项目中使用marked读取Markdown并转为HTML的问题

原代码的问题点 #

• 路径错误：../src/markdown/About.md 这个路径在Vite打包后无效，因为src目录不会被打包到生产环境的静态资源里
• 异步逻辑错误：marked.parse 在fetch请求完成前就执行了，此时this.markdown还是空字符串，无法渲染内容
• 混合API风格：同时使用了<script setup>和Options API，容易造成逻辑混乱
• 直接操作DOM：用document.querySelector修改innerHTML不符合Vue的响应式开发思路

正确实现步骤 #

1. 调整MD文件位置
   把你的markdown文件夹移动到项目根目录的public文件夹下，这样Vite会将其作为静态资源暴露，访问路径变为/markdown/About.md

2. 使用Composition API重构代码
   用<script setup>统一编写逻辑，利用Vue的响应式和异步处理来完成渲染：

<script setup>
import { marked } from 'marked'
import { ref, onMounted } from 'vue'

const markdown = ref('')
const query = ref(getQueryVariable('q'))

// 定义获取URL参数的方法（如果之前没全局定义）
function getQueryVariable(variable) {
  const query = window.location.search.substring(1)
  const vars = query.split('&')
  for (let i = 0; i < vars.length; i++) {
    const pair = vars[i].split('=')
    if (pair[0] === variable) {
      return decodeURIComponent(pair[1])
    }
  }
  return ''
}

onMounted(async () => {
  try {
    // 从public目录请求MD文件
    const response = await fetch('/markdown/About.md')
    const text = await response.text()
    markdown.value = marked.parse(text)
  } catch (error) {
    console.error('加载Markdown文件失败:', error)
    markdown.value = '加载失败，请检查文件路径'
  }
})
</script>

<template>
  <div class='marked' v-html="markdown"></div>
</template>

关键说明 #

• 静态资源路径：Vite中public目录下的文件可以直接通过根路径/xxx访问，无需关心相对路径
• 异步处理：用async/await让代码逻辑更清晰，确保拿到MD内容后再调用marked.parse
• 响应式渲染：用v-html指令绑定响应式变量markdown，Vue会自动更新DOM，无需手动操作
• 错误处理：添加try/catch捕获请求或解析错误，避免页面无提示崩溃

内容的提问来源于stack exchange，提问作者readf0x