參照網上的部落格會有版本問題，記錄一下目前我用的版本

1.下載所需package

npm i vue-markdown-loader -D
npm i [email protected] -D

npm vue-template-compiler -D (若是已經有則不需要安裝，不然有可能和現有的vue版本不匹配從而報錯)

vue-loader版本過高會不相容，經過測試安裝14.2.2版本可以使用

vue-template-compiler需要和vue的版本一致

（若是直接安裝vue-loader最新版會提示升級vue和vue-compiler,但是升級後的vue沒有和vue-template-compiler匹配的版本，所以我選擇降低vue-loader版本）

# 樣式
npm i github-markdown-css -D
npm i highlight.js -D

2.在vue.config.js配置

module.exports = {
  publicPath: './',
  chainWebpack: (config) => {
    config.module.rule('md')
    .test(/\.md/)
    .use('vue-loader')
    .loader('vue-loader')
   .end()
   .use('vue-markdown-loader')
   .loader('vue-markdown-loader/lib/markdown-compiler')
   .options({
     raw: true
   })
  },
}
 

3.在頁面使用

<template>
<!-- class markdown-body 必須加，否則標籤樣式會出現問題 -->
<div class="markdown-body">
<markdown />
</div>
</template>
<script>

4.js引入

<script>
// 引⼊ markdown ⽂件，引⼊後是⼀個元件，需要在 components 中註冊
import markdown from '@/assets/md/Android_MQTT.md'
// 程式碼⾼亮
import 'highlight.js/styles/github.css'
import 
 
'github-markdown-css'
// 其他元素使⽤ github 的樣
export default {
  components: { markdown }
}
</script>