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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
Jquery动态更改一张位图的src与Attr的使用
Jul 31 Javascript
js实现的常用的左侧导航效果
Oct 17 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
Webpack中雪碧图插件使用详解
May 25 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果
Aug 16 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
关于页面优化和伪静态
2009/10/11 PHP
PHP垃圾回收机制简单说明
2010/07/22 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
Symfony的安装和配置方法
2016/03/17 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
jQuery Validation PlugIn的使用方法详解
2015/12/18 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
python将文本转换成图片输出的方法
2015/04/28 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
深入了解Python 变量作用域
2020/07/24 Python
Python编写单元测试代码实例
2020/09/10 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
印尼旅游网站:via
2017/11/12 全球购物
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
无刑事犯罪记录证明
2014/09/18 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
介绍信格式样本
2015/05/05 职场文书
爱的教育读书笔记
2015/06/26 职场文书
2015双创工作总结
2015/07/24 职场文书
eval(cmd)与eval($cmd)的区别与联系
2021/07/07 PHP
python实现Nao机器人的单目测距
2021/09/04 Python
linux下安装redis图文详细步骤
2021/12/04 Redis