Vue cli添加Webpack rule显示markdown文件

最新推荐文章于 2023-06-18 18:02:28 发布

原创最新推荐文章于 2023-06-18 18:02:28 发布 · 807 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #markdown

Vue进阶专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用Vue CLI为项目添加Webpack配置，以解析和显示Markdown文件。首先，通过官方文档了解配置步骤，然后创建一个名为markdown.vue的组件来展示Markdown文档。接着，在项目根目录下创建vue.config.js文件，根据Webpack原始配置顺序进行设置。使用vue inspect命令可以检查自定义的Webpack规则，确保Markdown文件能够被正确处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue cli添加webpack配置官网详解：
https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7

新建md文件：

scr
|-assets
	|-hello.md

创建用于显示markdown文档的markdown.vue

<template>
	<my-markdown></my-markdown>
</template>

<script>
import myMarkdown from '../assets/hello.md';
export default {
	name:'markdown',
	components: {
			myMarkdown
	}
}
</script>

添加Webpack配置
在根目录下创建文件vue.config.js，这里的运行顺序同webpack原始配置顺序一致，从低到高运行。

//vue.config.js
module.exports = {
	chainWebpack: config => {
		const markdownRule = config.module.rule('markdown); //自动添加rule
		markdownRule.test(/\.md$/);
		markdownRule.use('vue-loader')
    	.loader('vue-loader')
    	.end()
    	.use('vue-markdown-loader')
    	.loader('vue-markdown-loader/lib/markdown-compiler')
    	.options({
     	raw: true
    	})
    	.end();
	}
}

vue inspect查看自定义rule：

vue inspect --rule markdown

结果：

/* config.module.rule('markdown') */
{
  test: /\.md$/,
  use: [
    /* config.module.rule('markdown').use('vue-loader') */
    {
      loader: 'vue-loader'
    },
    /* config.module.rule('markdown').use('vue-markdown-loader') */
    {
      loader: 'vue-markdown-loader/lib/markdown-compiler',
      options: {
        raw: true
      }
    }
  ]
}

从结果可以看出，与在webpack.config.js中定义的结构一样，只不过是包了一层语法糖