Vue引入并使用md文件方法

第一步：在Vue项目中安装以下依赖：

cnpm i markdown-loader html-loader --save

cnpm i showdown --save

第二步：在build/webpack.base.conf.js文件中做如下配置：（配置在module里边）

{
   test: /\.md$/,
   use: [
      { loader: 'html-loader' },
      { loader: 'markdown-loader', options: {} }
   ]
}

第三步：在main.js中引入并添加使用

import showdown from 'showdown'// 引入md文件

// 使用md文件
Vue.prototype.md2html = (md)=> {
  let converter = new showdown.Converter();
  let text = md.toString();
  let html = converter.makeHtml(text);
  return html
};

第四步：页面中使用，使用方法如下：

import readme from '../readmes/array-sort.md'// 引入md文件

data(){
      return{
         readme:this.md2html(readme),// 在data里边声明
      }
},

<div v-html="readme"></div> // 最后在页面上使用

 

注：本文参考以下作者：https://blog.csdn.net/qq_42848534/article/details/90047843