推薦方案：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