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


Posted in Javascript onJanuary 09, 2018

最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误。。。网上查找了一堆解决办法,总结如下

一、首先修改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问题的修复方法(总结篇),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery实战之品牌展示列表效果
Apr 10 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
防止文件缓存的js代码
Jan 10 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
vue时间格式化实例代码
Jun 13 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 #Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 #Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 #Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 #Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 #Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 #Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 #Javascript
You might like
PHP中使用BigMap实例
2015/03/30 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
form中限制文本字节数js代码
2007/06/10 Javascript
javascript学习笔记(九) js对象 设计模式
2012/06/19 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
python类定义的讲解
2013/11/01 Python
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
python中函数传参详解
2016/07/03 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python ldap实现登录实例代码
2016/09/30 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Python3.4学习笔记之列表、数组操作示例
2019/03/01 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
客服部工作职责范本
2014/02/14 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
2015年宣传工作总结
2015/04/08 职场文书
反腐倡廉观后感
2015/06/08 职场文书
分家协议书范本
2016/03/22 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
Python 可迭代对象 iterable的具体使用
2021/08/07 Python