关于vite打包不能识别空格字符路径导致报错的问题

1.报错截图：

 最近在做一个新项目时迁移了部分旧项目的功能界面。使用vite打包时

2.报错原因：

"../../assets/imgs/Group 825.png"

这种带有空格的路径空格会被转义成%20，导致报错找不到图片路径打包失败。

3.打包原理解释

（1）为什么会导致vite出现这种路径问题？

        Vite 打包工具使用的是 url-parse 库来处理路径，该库会将路径中的特殊字符进行转义，包括空格字符，在 URL 编码中空格字符会被转义为 %20。因此，如果在路径中包含空格字符，Vite 会将其转义为 %20，导致打包失败。

（2）为什么webpack就不会出现这种问题呢？

        webpack和 Vite 不同，Webpack 使用的是 Node.js 自带的模块 path 来处理路径。在 Node.js 中，空格字符不需要进行转义，因此在 Webpack 打包项目时，不会出现和 Vite 类似的路径转义问题。

例如，在 Webpack 中，在路径中使用 /path/to/my file.txt 是合法的，不需要进行转义，Webpack 也能正常处理这个路径。

然而，为了保证项目的可移植性，在跨平台开发时最好仍然避免在路径中使用空格字符。