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与Prototype并存的冲突的解决方法
Aug 29 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
JS打印组合功能
Aug 04 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
vue登录注册实例详解
Sep 14 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
php 动态多文件上传
2009/01/18 PHP
php win下Socket方式发邮件类
2009/08/21 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
关于php中一些字符串总结
2016/05/05 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
理解javascript中的闭包
2017/01/11 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
vue-列表下详情的展开与折叠案例
2020/07/28 Javascript
Python处理字符串之isspace()方法的使用
2015/05/19 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
保护环境建议书
2014/03/12 职场文书
学校教师安全责任书
2014/07/23 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
运动会铅球比赛加油稿
2014/09/26 职场文书
教师党员承诺书2015
2015/01/21 职场文书
团拜会主持词
2015/07/04 职场文书
文艺节目主持词
2015/07/06 职场文书