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 相关文章推荐
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
判断ie的两种简单方法
Aug 12 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
简单谈谈json跨域
Mar 13 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
JavaScript Uploadify文件上传实例
Feb 28 Javascript
vue中将html字符串转换成html后遇到的问题小结
Dec 10 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
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小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
php use和include区别总结
2019/10/13 PHP
Extjs中常用表单介绍与应用
2010/06/07 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python中的闭包实例详解
2014/08/29 Python
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
Python中的作用域规则详解
2015/01/30 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
大学生个人简历中的自我评价
2013/12/27 职场文书
学生思想表现的评语
2014/01/30 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
八项规定对照检查材料
2014/08/31 职场文书
昆虫记读书笔记
2015/06/26 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
诚信教育主题班会
2015/08/13 职场文书