VueCli3+TypeScript3项目显示Markdown内容-阿里云开发者社区

VueCli3+TypeScript3项目显示Markdown内容

2024-01-05 98

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： VueCli3+TypeScript3项目显示Markdown内容

版本记录

vue: v2.6.10@vue/cli-plugin-babel: v3.12.0typescript: v3.4.3showdown: v1.9.1

安装 showdown

npm install showdown -D
npm install @types/showdown -D

基础使用

在显示 Markdown 内容的 Component 中引入 showdown

import showdown from 'showdown'

<template>
  <div>
    <div v-html="html" class="center"></div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import showdown from 'showdown'
@Component({
  components: {}
})
export default class Showdown extends Vue {
  private html: string = ''
  private mounted() {
    const converter = new showdown.Converter()
    const markdownContent: string = '# Markdown Title `showdown.js`'
    this.html = converter.makeHtml(markdownContent)
  }
}
</script>

到这一步应该就能看到 Markdown 基本内容显示了，如下图效果

引入项目中的 md 文件并显示

这里引入项目根目录下的 README.md 文件并显示，使用 import 引入 README.md

import * as readmeContent from '../../../README.md'

控制台报错，提示 Cannot find module '../../../README.md' or its corresponding type declarations

文件路径路径是正确的，缺少类型声明导致，添加类型声明即可。在 src 目录下的 types.d.ts 文件中添加 declare module "*.md", 如下图效果

这时候 md 文件引入就没问题了，使用 console.info(readmeContent) 输出看下内容如何，这时候提示模块解析失败

这个情况需要使用 loader 来处理，分别安装配置 html-loader 和 markdown-loader

npm install html-loader markdown-loader -D

在 vue.config.js 中配置这两个 loader

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ?
    '/vue-vuetify-admin/' : '/',
  outputDir: 'docs',
  // configureWebpack: {
  //   devtool: 'source-map'
  // },
  chainWebpack: config => {
    config.module
      .rule('md')
      .test(/\.md/)
      .use('html-loader')
      .loader('html-loader')
      .end()
      .use('markdown-loader')
      .loader('markdown-loader')
      .end()
  }
}