準備的資源：

• highlight.js ： 實現代碼高亮，通過npm install highlight.js -D安裝

• vue-markdown-loader：解析md文件的必備loader，通過npm install vue-markdown-loader -D安裝

下面我們分兩個場景來說明一下md文件的解析

Webpack

在項目根目錄下創建build/webpack.config.js

// 在webpack.config.js中添加規則 {test: /\.md$/,loader: 'vue-markdown-loader', }

在main.js中配置樣式文件

// main.js import hljs from 'highlight.js'; import 'highlight.js/styles/atom-one-light.css';

Vue-Cli

在項目根目錄下創建vue.config.js

// 在vue.config.js中添加 // webpack配置 chainWebpack: (config) => {config.module.rule('markdown').test(/\.md$/).use('vue-loader').loader('vue-loader').end().use('vue-markdown-loader').loader('vue-markdown-loader/lib/markdown-compiler').options({preset: 'default',breaks: true,raw: true,typographer: true,}) },

在main.js中配置樣式文件

// main.js import hljs from 'highlight.js'; import 'highlight.js/styles/atom-one-light.css';

最終效果

最后喜歡我的小伙伴也可以通過關注公眾號“劍指大前端”，或者掃描下方二維碼聯系到我，進行經驗交流和分享，同時我也會定期分享一些大前端干貨，讓我們的開發從此不迷路。

關注后，回復“webpack”，即可獲取最新webpack講解教學視頻哦 🙂🙂🙂

總結

以上是生活随笔為你收集整理的Webpack/Vue-cli两种方式加载markdown文件并实现代码高亮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。