Vue 2 项目中内嵌 md 文件

推荐方案：raw-loader + marked 解析 Markdown

第一步：安装依赖

npm install marked --save
npm install raw-loader --save-dev

---

第二步：配置 webpack 支持 .md 文件

打开 vue.config.js 或 webpack.config.js，添加以下配置：

module.exports = {chainWebpack: config => {config.module.rule('md').test(/\.md$/).use('raw-loader').loader('raw-loader').end()}
}

---

第三步：在组件中使用 .md

假设你有一个 README.md 文件：

# 标题这是正文 **内容**。

组件中这样使用：

<template><div v-html="htmlContent" class="markdown-body"></div>
</template><script>
import { marked } from 'marked'
import markdown from './README.md' // Webpack 会自动以字符串形式导入export default {data() {return {htmlContent: marked.parse(markdown)}}
}
</script><style>
/* 可选：引入 GitHub 风格的 markdown 样式 */
@import 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css';.markdown-body {padding: 20px;background: #fff;
}
</style>

---

📝 补充说明：

项目	是否支持
Vue 2.7 + Webpack	✅ 推荐使用 raw-loader
Vue 2.7 + Vite（不常见）	✅ 使用 ?raw 导入
Vue 3 + Vite	✅ 使用 vite-plugin-md