关于导入文件图片出现的问题

163 阅读2分钟
  • 默认情况下,webpack会将Vue项目中使用的图片(以及其他静态资源)进行打包处理。这意味着webpack会将这些图片文件复制到输出目录(通常是dist目录),并为它们生成相应的URL。这样,在构建后的应用程序中,你可以通过这些URL来访问这些图片
  • Webpack会将Vue项目中所有引入的图片文件加入打包,无论这些图片文件是否在项目中实际被使用。这意味着所有在Vue组件、样式文件或JavaScript代码中通过相对路径或模块导入方式引用的图片都会被Webpack处理并包含在最终的打包输出中。Webpack的打包过程是基于模块依赖关系进行的,它会分析你的项目中的模块引用,并将相关的资源文件打包到输出目录中。这包括但不限于JavaScript文件、样式文件、图片文件等。当你在Vue组件、样式文件或JavaScript代码中引用了图片,Webpack会根据相应的加载器规则将这些图片文件复制到输出目录,并生成对应的URL,以便在应用程序中使用。

webpack能识别的引入

  1. 在css中backgroud-img("./img"),webpack可以识别她导入了文件,会将相关文件加入静态资源
  2. JavaScript代码中通过相对路径或模块导入方式

webpack不能识别的引入

  • 对于不能识别的引入将不会被打包,而public文件下的文件都会被打包成静态资源,只需要将文件放在public文件下即可 image.png

解决webpack不能识别的引入

  • 对于不能识别的引入将不会被打包,而public文件下的文件都会被打包成静态资源,只需要将文件放在public文件下即可
  • 通过import或者require导入,但他两需要对应的loader,不然会报错

解决导入报错

  1. 例如引入的文件a,首先检查引入的文件是否是原文件a,还是在引入时就出现了问题