準(zhǔn)備的資源：

• highlight.js ： 實(shí)現(xiàn)代碼高亮，通過npm install highlight.js -D安裝

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

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

Webpack

在項(xiàng)目根目錄下創(chuàng)建build/webpack.config.js

// 在webpack.config.js中添加規(guī)則 {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

在項(xiàng)目根目錄下創(chuàng)建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';

最終效果

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

關(guān)注后，回復(fù)“webpack”，即可獲取最新webpack講解教學(xué)視頻哦 🙂🙂🙂

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。