webpack+vue项目打包生成资源文件报404错误怎么办

这篇文章主要介绍了webpack+vue项目打包生成资源文件报404错误怎么办,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

专业从事成都网站制作、成都网站建设,高端网站制作设计,微信小程序,网站推广的成都做网站的公司。优秀技术团队竭力真诚服务,采用H5建站+CSS3前端渲染技术,成都响应式网站建设公司,让网站在手机、平板、PC、微信下都能呈现。建站过程建立专项小组,与您实时在线互动,随时提供解决方案,畅聊想法和感受。

一、首先修改config目录下的index.js文件

webpack+vue项目打包生成资源文件报404错误怎么办

将其中build的配置项assetsPublicPath进行修改,改为

webpack+vue项目打包生成资源文件报404错误怎么办

目的是将资源文件的引入路径,改为相对地址(相对index.html)

二、此时html中的js、css、img引入均没有问题,但是css中的background-image还是报404

此时的问题原因是,使用了相对地址后,在css进行引入的图片路径,其相对的是css文件的路径

此时的修改方法是,修改build文件夹中的utils.js文件,修改如下这一行

webpack+vue项目打包生成资源文件报404错误怎么办

这样css中的背景图也OK了,如果在css中引入字体也可以用这样的方式修复404问题。

感谢你能够认真阅读完这篇文章,希望小编分享的“webpack+vue项目打包生成资源文件报404错误怎么办”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


名称栏目:webpack+vue项目打包生成资源文件报404错误怎么办
URL地址:http://scyanting.com/article/ghocpp.html