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 相关文章推荐
Prototype源码浅析 Number部分
Jan 16 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 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中shuffle数组值随便排序函数用法
2014/11/21 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP实现页面静态化的超简单方法
2016/09/06 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
深入了解javascript中的prototype与继承
2013/04/14 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
JavaScript 基本概念
2015/01/20 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
微信小程序slider组件使用详解
2018/01/31 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
微信小程序实现的动态设置导航栏标题功能示例
2019/01/31 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
Python 连连看连接算法
2008/11/22 Python
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
Python实现最大子序和的方法示例
2019/07/05 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
德国W家官网,可直邮中国的母婴商城:Windeln.de
2021/03/03 全球购物
十八大感想感言
2014/02/10 职场文书
促销活动总结
2014/04/28 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers