Vue 3 - 文件名中包含空格的 png "This relative module was not found"

Question

摘要

在将一个名为foo - compressed.png的图像添加到我的资产文件夹并修改组件以包含它之后，如下所示：

...
<img src="../../assets/bar-compressed.png" />
<img src="../../assets/foo - compressed.png" />
...

我在尝试构建(prod)或服务(dev)时开始出现这个错误：

This relative module was not found:
* ../../assets/foo%20-%20compressed.png in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--7!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--1-1!./src/features/landing/MyComponent.vue?vue&type=template&id=100c0404

备注

• 其他图像仍在assets文件夹中工作
• 此图像肯定存在于assets文件夹中

为什么一个图像有效，而另一个图像会导致此编译错误？

Answer 1

文件名中的空格是问题所在。

将文件名从foo - compressed.png更改为foo-compressed.png解决了此问题。

这是Vue漏洞吗？还是预期行为？