webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

webpack vue 项目打包生成的文件,资源文件报404问题的修复方法总结篇 在本文中，我们将讨论webpack vue项目打包生成的文件中资源文件报404问题的修复方法。在使用webpack + vue做个人娱乐项目时，可能会出现css js img静态资源文件均找不到路径，报404错误的情况。本文将总结解决这个问题的方法。 修改config目录下的index.js文件 我们需要修改config目录下的index.js文件中的build配置项assetsPublicPath。将其修改为相对地址（相对index.html），以便将资源文件的引入路径修改为相对地址。这样可以解决html中的js、css、img引入问题。 修改utils.js文件 但是，修改了配置项assetsPublicPath后，css中的background-image仍然会报404错误。这是因为css文件的路径是相对css文件的路径，而不是相对index.html的路径。为了解决这个问题，需要修改build文件夹中的utils.js文件。修改方法是将css中的背景图路径修改为相对路径。 解决css中的背景图和字体引入问题 通过修改utils.js文件，我们可以解决css中的背景图和字体引入问题。这样，在css中引入字体也可以用这样的方式修复404问题。 总结 本文总结了解决webpack vue项目打包生成的文件中资源文件报404问题的修复方法。通过修改config目录下的index.js文件和utils.js文件，我们可以解决html中的js、css、img引入问题，以及css中的背景图和字体引入问题。我们希望本文能够对大家有所帮助，如果大家有任何疑问，请随时留言。 在这里，我们还需要注意的一点是，webpack vue项目打包生成的文件中资源文件报404问题可能是由于多种原因引起的，例如配置项assetsPublicPath的修改、css文件的路径问题等。因此，在解决问题时，需要逐步排查问题的原因，以便找到最合适的解决方法。 我们感谢大家对我们网站的支持，我们将继续努力，提供更多有价值的内容。如果您有任何问题或建议，请随时与我们联系。