编程 Javascript

webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

Posted in Javascript onJanuary 09, 2018

最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下

一、首先修改config目录下的index.js文件

将其中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问题的修复方法(总结篇)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

- Author -

骨月枫?

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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 职场文书