VuePress图片资源中文路径问题

现象描述

• 图片资源以英文字符为路径
• 相对路径以./或者../开始的正确路径

同时符合以上两条，就没问题

• 图片资源路径如果不是英文
• 图片资源是相对(短)路径(不以./ ../开始 )

只要有以上任何一条，编译将失败

问题分析

• Vuepress 本身使用的是webpack
• 图片引用使用的应该是url-loader/file-loader
• *.md文件的编译使用的是markdown-it

如果图片资源的引用是使用url-loader，那么短路径访问的就不再是相对路径，而是node_modules目录下资源。所以，在VuePress中的路径资源必须是以./or../开始
markdown-it会对路径做一个encode操作，具体转换由mdurl执行，参考：https://github.com/markdown-it/markdown-it/blob/575cfeab8acd2d59d637e856d3a205c6e81419cb/lib/index.js#L47

解决方案

• 将短路经之前填补./
• 将资源 url 执行一次mdurl.decode

markdown-it-disable-url-encode: https://github.com/nanyuantingfeng/markdown-it-disable-url-encode

（1）安装 markdown-it-disable-url-encode

yarn add markdown-it-disable-url-encode

（2）将其注入VuePress配置文件中

vim docs/.vuepress/config.js

module.exports = {
  // .....
  markdown: {
    // ......
    extendMarkdown: md => {
      md.use(require("markdown-it-disable-url-encode"));
    }
  }
};