如何使用vue-cli3在项目中展示Markdown文件内容？

本文共计536个文字，预计阅读时间需要3分钟。

【版本】vue-cli3 + webpack@4.33.0【步骤】

1、安装插件：npm i vue-markdown-loader -D

插件基于markdown-it，无需单独安装markdown-it。

2、修改vue.config.js配置文件（如果不存在）：

• vue-cli3
• webpack@4.33.0

1、安装插件vue-markdown-loader

npm i vue-markdown-loader -D

ps：这个插件是基于markdown-it的，不需要单独安装markdown-it。

2、修改vue.config.js配置文件（如果没有，在项目根目录新建一个）：

module.exports = { 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、直接上代码

App.vue

<template> <my-markdown></my-markdown> </template> <script> import myMarkdown from './assets/cpu.md'; export default { components: { myMarkdown }, </script>

正常情况下，到这里就结束了。