Vuepress 图片资源中文路径问题

一直再使用 Typora 编写 Markdown 文件,最近玩了一下 Vuepress, 发现 Typora
编写的 MD 文件在 VuePress 之中不能被正常编译

问题现象

英文资源路径

1. demo.md

   # Hello VuePress!
   
   ![image](./assets/image.png)

2. 启动调试服务

   
   

   • 服务启动成功
   • 没有任何问题
   • 图片被编译成绝对路径

3. 修改 demo.md ,将图片依旧设置成相对路径, 但是不以 ./ 开头

   # Hello VuePress!
   
   ![image](assets/image.png)

4. 观看结果

   
   

• 图片不能显示
• 图片资源被编译成相对路径

中文资源路径

1. 更新到中文图片资源路径

   # Hello VuePress!
   
   ![image](./图片/image.png)

2) 启动服务

• 页面一片空白
• 未渲染 IMG 资源的 DOM 节点
• console 4 处报错

  最后一处报错信息可以发现, 中文的资源路径被转译了
  ./图片/image.png ===> ./%E5%9B%BE%E7%89%87/image.png
  并且 webpack 并没有找到 %E5%9B%BE%E7%89%87/image.png 此资源

1. 修改资源路径(删除./)

   

• 页面 IMG 资源 DOM 节点已经渲染
• 中文路经被转译
• console 没有报错

总结一下

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

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

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

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

但是:

Typora 引用的资源路径, 是以文件名创建的相对目录, 并且相对路径使用的是短路径

而且中文文件名是正常操作(对于我来说).

很不幸, 两条编译失败的情况同时命中.

问题分析

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

本能的能够猜测到部分真相了:

1. 如果图片资源的引用是使用 url-loader , 那么短路径访问的就不再是相对路径,而是 node_modules 目录下资源.所以,在 vuepress 中的路径资源必须是以 ./ or ../开始
2. markdown-it 会对路径做一个encode 操作, 具体转换由 mdurl 执行

   

https://github.com/markdown-i...

解决方案就很简单了 :

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

编写markdown-it插件

markdown-it-disable-url-encode

解决方案

1. 安装 markdown-it-disable-url-encode

   npm i markdown-it-disable-url-encode

2. 将其注入vuepress 配置文件中

   .vuepress/config.js

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

至此,Typora 编写的 markdown 文件就可以在vuepress中完美编译了