vite+vue3解决打包后出现的 Failed to construct ‘URL‘: Invalid URL问题

在使用vite+vue3进行开发时，在打包后可能会遇到"Failed to construct ‘URL‘: Invalid URL"的问题。这是因为使用了new URL(url,import.meta.url).href的方式动态引入图片，如果图片目录不在public中，就会导致此问题。

为了解决这个问题，需要将图片目录移动到public中，或者在vite.config.js文件中设置publicDir选项，将图片目录设置为public。

下面是详细的步骤：

1. 将图片目录移动到public中。
2. 在vite.config.js文件中设置publicDir选项。

module.exports = {
  publicDir: 'public',
  ...
};

设置publicDir选项后，vite就会将public目录中的文件作为静态资源进行处理，就不会出现"Failed to construct ‘URL‘: Invalid URL"的问题了。

正文

问题

在使用vite+vue3进行开发时，在打包后可能会遇到"Failed to construct ‘URL‘: Invalid URL"的问题。

问题原因

这个问题可能是因为使用了new URL(url,import.meta.url).href的方式动态引入图片，如果图片目录不在public中，就会导致此问题。

解决方法

为了解决这个问题，可以采用以下两种方法：

1. 将图片目录移动到public中。
2. 在vite.config.js文件中设置publicDir选项，将图片目录设置为public。

详细步骤

1. 将图片目录移动到public中。

将图片目录移动到public中，然后运行vite命令重新打包项目。

2. 在vite.config.js文件中设置publicDir选项。

在vite.config.js文件中设置publicDir选项，将图片目录设置为public。

module.exports = {
  publicDir: 'public',
  ...
};

设置publicDir选项后，vite就会将public目录中的文件作为静态资源进行处理，就不会出现"Failed to construct ‘URL‘: Invalid URL"的问题了。

总结

如果在vite+vue3中遇到了"Failed to construct ‘URL‘: Invalid URL"的问题，可以尝试将图片目录移动到public中，或者在vite.config.js文件中设置publicDir选项，将图片目录设置为public。