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替换已存在于element上的event的方法
Mar 09 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
javascript+canvas制作九宫格小程序
Dec 28 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 Javascript
node中koa中间件机制详解
Aug 22 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
KOA+egg.js集成kafka消息队列的示例
Nov 09 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
Vue实现点击箭头上下移动效果
Jun 11 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 第三节 变量介绍
2012/04/28 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
php和html的区别点详细总结
2019/09/24 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
Node.js爬取豆瓣数据实例分析
2018/03/05 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
this在vue和小程序中的使用详解
2019/01/28 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
BONIA波尼亚新加坡官网:皮革手袋,鞋类和配件
2016/08/25 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
励志演讲稿范文
2014/04/29 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
历史博物馆观后感
2015/06/05 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript