vditor无法显示或无法渲染的解决方法

vditor参考文档：https://ld246.com/article/1549638745630

CDN 切换

由于使用了按需加载的机制，默认 CDN 为 https://unpkg.com/vditor@版本号

如果代码有修改或需要使用自建 CDN 的话，可按以下步骤进行操作：

• 初始化时，需对 options 及 IPreviewOptions 中的 cdn，emojiPath, themes 进行配置
• highlightRender，mathRender，abcRender，chartRender，mermaidRender，SMILESRender，markmapRender，flowchartRender，mindmapRender，plantumlRender，graphvizRender，setCodeTheme，setContentTheme 方法中需添加 cdn 参数
• 将 build 成功的 dist 目录或 jsDelivr 中的 dist 目录拷贝至正确的位置

1、问题描述

        vditor 插件原先是正常渲染的，突然就显示不出来，无法渲染 markdown 内容，检查自身业务代码也没问题。

2、分析原因

        打开浏览器调试工具发现，由于vditor使用按需加载的机制，在渲染插件时，加载的资源文件报错了。例如：https://unpkg.com/vditor@3.10.9/dist/js/i18n/zh_CN.js 这个资源请求提示超时了，因为插件使用 unpkg 外网CDN，偶尔出现访问资源不稳定的情况。为了避免这种不确定因素，建议 替换CDN源 或 将依赖文件存放在项目 根目录资源。

3、解决方法 

1）替换CDN源

<script setup>
  let editor = new Vditor('vditorId', {
    // cdn: 'https://unpkg.com/vditor@3.10.9', // 默认外网CDN
    cdn: 'https://cdn.jsdelivr.net/npm/vditor@3.10.9', // 替换外网CDN

    // 若所在企业有自家静态资源库 可直接拷贝依赖包文件夹
    // cdn: 'https://static.xxx-crop.com/libs/vditor/3.10.9', // 替换自家CDN
  });
</script>

2）根目录资源

        打开项目依赖文件夹 /node_modules，将 /vditor 全部文件都复制到当前项目的根目录 /public，此处存放在 /public/packages/vditor/3.10.9，复制文件时必须要保留 /dist 这层目录，才能保证插件cdn参数正常访问到资源。

     

<script setup>
  // 例如：前端项目网址为 https://www.xxx-admin.com/#/home
  // 此处将依赖文件存放在项目根目录/public/packages/vditor/3.10.9

  let editor = new Vditor('vditorId', {
    cdn: 'https://www.xxx-admin.com/packages/vditor/3.10.9', // 根目录资源
  });
</script>