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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
JavaScript中的变量声明早于赋值分析
Mar 01 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
实现无刷新联动例子汇总
May 20 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
JS中substring与substr的用法
Nov 16 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
js实现移动端轮播图滑动切换
Dec 21 Javascript
JS实现点击掉落特效
Jan 29 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缓存函数的使用说明
2013/05/10 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
PHP序列化的四种实现方法与横向对比
2018/11/29 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
python列表操作实例
2015/01/14 Python
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
python生成大写32位uuid代码
2020/03/03 Python
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
幼儿园运动会入场词
2014/02/10 职场文书
经典广告词大全
2014/03/14 职场文书
婚庆司仪主持词
2014/03/15 职场文书
无毒社区工作方案
2014/05/23 职场文书
工商管理自荐书
2014/07/06 职场文书
公司合作意向书范文
2014/07/30 职场文书
介绍信的格式
2015/01/30 职场文书