new URL()在生产环境会出现的一种问题-优快云博客

本文链接：https://blog.youkuaiyun.com/dawnchen1/article/details/127389648

本文探讨了在生产环境中，使用newURL()函数时遇到的URL解析问题，尤其是在输入参数为相对路径时，如何通过实例和Vite官网解释来解决不同输出的bug。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标题new URL()在生产环境会出现的一种问题

new URL(input[, base])#
input The absolute or relative input URL to parse. If input is relative, then base is required. If input is absolute, the base is ignored. If input is not a string, it is converted to a string first.
base The base URL to resolve against if the input is not absolute. If base is not a string, it is converted to a string first.

在开发环境中

下面两种方式都能输出正常的url
这两者的区别是input参数，一个是直接写的字符串，另一个是赋值给一个变量

function getImgUrl2() {
  console.log('getImgUrl2',new URL(`../../assets/home/icon-zh.png`, import.meta.url).href)
  return new URL(`../../assets/home/icon-zh.png`, import.meta.url).href;
}
function getImgUrl3() {
  let url = `../../assets/home/icon-zh.png`;
  console.log('getImgUrl3',new URL(url, import.meta.url).href)
  return new URL(url, import.meta.url).href;
}

控制台输出一样，页面显示正常。

getImgUrl2 http://localhost:3000/src/assets/home/icon-zh.png
getImgUrl3 http://localhost:3000/src/assets/home/icon-zh.png

在这里插入图片描述

生产环境中

控制台输出不一样，页面显示异常

getImgUrl2 data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAApCAYAAACoYAD2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphNDUwZjUzZS1iYWVlLTQyZDMtYTMyNy04MDdlZjJkMjNmMjQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjBBMUM2QTIwNTBEMTFFREFGRDA4NkNEM0E4MzZCODUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjBBMUM2QTEwNTBEMTFFREFGRDA4NkNEM0E4MzZCODUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpmMWVmZGI4NS03Nzk4LTQ5ZDgtYTU2NC05NzVlZmI4ZjAyZjEiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpkMGNkNzViMi1iNWQ5LTlkNGMtYjE5Yy0zN2U1MDhhMmViMTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Tn6sDAAAEhUlEQVR42sxZWWhTURCdJK9pusS0davYKLSKtFasdav7brEiqCBuVMWvYi3ih9/6KfghilX//NIvF6QgWhFxqQVFKdhWBFeSUkvtvmd15nVe+0xeXt5N0tALJxv33jl37sy8mYkpGAzCdB8SvbQNBGJZm43YjtiKKEIsQWQiHIg+xCDiK6IV8QrxAtEjKmS+3Qwm0qQgyXJEFWIPIlVg3RjiKeIWoh4RnAqS6xDXEKsTcIMfEOcQjUZImg1saEPUIhoSRBB4nwbe1xZtcjSSTj7tGYQpwf5g4n0bWU5MJAv5tCVT7LwlLKdQlGQeG7czSVHGyfLyIoYgDRus01ow4g1AbUMnvP05CAGB8OrMssKJVTmwdkGG3rQ8lksOOvqfXWh49w1EdegOrl4PXHzWDn+HfPL39BQzyKt0yJrR6rx4Gq9/fNKp1TPh4LKsaGciZzqrF4LKEO+0nOTKyw54gxrcudgOp9fMgsxUsyEtksab2obhUn27/P3ByXxIsej6IJ1ogxKeQkMQrbweyYvdfR75vWr9bMMEFW2W5qVD0dzxSNM36jfi9VcjOc5uvTio2CDZZSwjK80iv390D0PvSFSiaxG7tBynSm+VxTSuYMW+aPzu8UDHgBe1ZQo5UBAkvNJluWlhV0uORzhWmgNHSrL1RFIMfa4mSbMrRDRD11bzyKU759DybKhcmSN/9vMFlM5Ph+Y/I3DvUzfk2iXYWmCPtLyCefUoJHcgrCIk09C7D6MmZE2aQzSJhKyowbKFkyHHx/ZyqXyefMDKe7/gzocuPZJW5nVfIblZ1MaIxPHSHKFnoBLKKG7aJDP0DEe1TeJ1X3Gc4mQlsD6+dqtkKBUoVtvkIlFhHnSgu2hX7f1ekPC61SL96Dik6b2FDlgyxxYWkhTnMjAK1CQdoiT70a4efe6NEnakMJKikUtNcobo6lkZEtQedEJ3BLtCk4uX4AQvhWR/LETJAZxZU2rC/eonTt80LRR71Zr8Jpo7Uqy7/OIPPiYnHYAePHuLHHISkqDxXU2yGbFNZDUF7JaO0bDfOwd9uusEy/wWNcnXiBqhojvdAg9P5csBmTRIwikU0e9ao5uTCl9AiOUrNUkq3D2ij0YiNTtTMjSXsnIimGtPMRyKmdcESeosPEHsj5yJBifsLpZxdEW2jNDHpM54onQ81Pnkbb0VSoZmtZgT4hEGbv2mVtJbz52FiFdLY8jjj5sgPVKHPQG9W3mv5JKhSW+QWx8NWrexJT8TfnSNwYW6NtiMn2fYLBAQbMjROccww3j7c0gWtq/IEanGOa9X0jaymsOqxQNY5X1Dkm9+DEJda/yxv2Bm6kRCHDJucTGoW9Km8aSp7lxojSbEeiqlojWsaMI+KhCTTNDNckeMtlncXD26kkTQxfLcog2rL1ykNyXhijexvJhafy7uzdwEg51ZgRHkfWn/3/H0J4GbR9Ws1fcJIkj7bOR9R6OGLoGNG7mzQLbzGMZ74EIxnNeV8z7vDFeaMTT2QdVQoLp4C2IpTP77QBn+AOMrp1vx//sw3cc/AQYAlT1yCJ7JrVgAAAAASUVORK5CYII=
getImgUrl3 http://127.0.0.1:5500/assets/home/icon-zh.png

在这里插入图片描述
问题解决vite官网解释