Vue cli添加Webpack rule显示markdown文件

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

Huijie Xu

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

阅读量765

点赞数

分类专栏： Vue进阶文章标签： vue markdown

本文链接：https://blog.csdn.net/Xu_cipu/article/details/105763770

版权

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

摘要由CSDN通过智能技术生成

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(&#

最低0.47元/天解锁文章

Huijie Xu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue cli添加Webpack rule显示markdown文件

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<temp...
复制链接

扫一扫

专栏目录