当前位置: 首页 > 编程日记 > 正文

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

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

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

2018010910062717.png

将其中build的配置项assetsPublicPath进行修改,改为

2018010910062718.png

目的是将资源文件的引入路径,改为相对地址(相对index.html)

二、此时html中的js、css、img引入均没有问题,但是css中的background-image还是报404

此时的问题原因是,使用了相对地址后,在css进行引入的图片路径,其相对的是css文件的路径

此时的修改方法是,修改build文件夹中的utils.js文件,修改如下这一行

2018010910062719.jpg

这样css中的背景图也OK了,如果在css中引入字体也可以用这样的方式修复404问题。

总结

以上所述是小编给大家介绍的解决webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。

总结

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验,欢迎加入编程之家官方交流群!

相关文章:

解决.net webservice的WebClient或HttpWebRequest首次连接缓慢问题

【编程环境】Visual Studio 2010, NET4.0 【开发语言】C#, 理论上VB.NET等依赖.NET Framework框架的语言均受此影响 【问题描述】 使用HttpWebRequest抓取网页内容,但首次请求总是莫名奇妙的阻塞在Request.GetResponse();上,不过一旦这次请求成功,后续的操作就很快了…

2019-1-11

unique的使用&#xff1a; 1. unique是把相邻的重复元素放到最后面。所以在对无序数列使用之前&#xff0c;需要用sort先排序。 2.unique的返回值是不重复区的的最后一个元素加一的地址。 sort(V.begin(), V.end() ); vector<int>::iterator end_unique unique&#xff…

搜索:广搜 词语阶梯

问题描述以及解决过程如下导图 广搜实现如下 #include <iostream> #include <algorithm> #include <vector> #include <string> #include <queue> #include <set> #include <map>using namespace std;/*判断两个单词是否有连接状态…

float属性html,详解CSS样式中的float属性

详解CSS样式中的float属性。float是 css样式的定位属性。我们在印刷排版中&#xff0c;文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中&#xff0c;应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流…

机房收费系统系列一:运行时错误‘-2147217843(80040e4d)’;用户‘sa’登陆失败...

做机房收费系统的时候&#xff0c;首先在SQL server数据库中添加好charge数据库&#xff08;在对象资源管理器中&#xff0c;右击数据库&#xff0c;点击附加&#xff0c;找到charge的mdf文件&#xff0c;点击确定&#xff09;&#xff0c;然后用ODBC配置好数据库&#xff0c;把…

JQuery新浪1630个表情插件

1.http://***/Detail.aspx?id131 2.http://***/Detail.aspx?id81转载于:https://www.cnblogs.com/zrp2013/archive/2013/05/17/3082961.html

linux open系统调用的O_DIRECT标记

前言 open系统调用中针对打开的文件描述符&#xff0c;可以增加一个O_DIRECT标记&#xff0c;该标记能够使得针对该文件描述符的写操作绕过操作系统page cache&#xff0c;直接进入通用块设备层&#xff0c;从而减少页缓存对IO效率的影响。 但是针对O_DIRECT标记有一个问题&a…

计算机专业每年都有国企招老吗,这十大专业在国企中最受欢迎,待遇高、前景好,有你的专业吗?...

古语说“三百六十行&#xff0c;行行出状元”这句话一点没错&#xff0c;但是当你报考传说中的“铁饭碗”、“金饭碗”的时候&#xff0c;你会发现&#xff0c;想入对行&#xff0c;首先你得选对专业&#xff0c;不管是对于报考还是以后的职业发展来说&#xff0c;选对专业和嫁…

实现一个基于 SharePoint 2013 的 Timecard 应用(下)

现在&#xff0c;基于 Timecard 数据来一点儿数据分析。 应用需求 对于 Timecard&#xff0c;分析下面 2 个方面&#xff1a; 对于单个项目&#xff0c;分析其中每个成员的工时占比&#xff0c;以此了解工作量分配&#xff0c;为组间人员调度提供参考。对于整个公司&#xff0c…

新书来了!《ActionScript 3.0游戏设计基础(第2版)》

已经开始预售&#xff1a;猛戳这里&#xff01;多谢支持&#xff01;文后附件为译者序。转载于:https://blog.51cto.com/58script/1202944

springcloud-spring cloud config统一配置中心

统一配置中心 为什么需要统一配置中心? 统一配置中心顾名思义,就是将配置统一管理,配置统一管理的好处是在日后大规模集群部署服务应用时相同的服务配置一致,日后再修改配置只需要统一修改全部同步,不需要一个一个服务手动维护 统一配置中心的架构图: 服务者消费者集群&#x…

a-awk外部变量传入,内部变量传出,同时过滤空格及其他字符

变量传递 外部变量传入 lsblk|awk -v A$A -v B$B {print A,B}lsblk | awk {print A,B} A$A B$B 内部变量传出 eval $(lsblk|awk {print "A$1"})eval $(lsblk|awk printf("A%s\n",$1)) 同时过滤空格及其他字符 df -Th|grep ceph- 2>/dev/null|awk -F…

UVa12096.The SetStack Computer

题目链接&#xff1a;http://uva.onlinejudge.org/index.php?optioncom_onlinejudge&Itemid8&pageshow_problem&problem3248 1391605812096The SetStack ComputerAcceptedC0.3022014-07-21 03:43:15The SetStack Computer Background from Wikipedia: \Set theory…

网络设置计算机,怎么重置电脑网络设置

现如今网络已经融入了我们的生活&#xff0c;我们对网络的要求也越来越过了&#xff0c;那么你知道怎么重置电脑网络设置吗?下面是学习啦小编整理的一些关于怎么重置电脑网络设置的相关资料&#xff0c;供你参考。重置电脑网络设置的方法开始→运行→输入&#xff1a;CMD 点击…

centos 学习日记 文件默认权限:umaks

使用方法&#xff1a; [rootkin /]# umask 0022 [rootkin /]# umask -S urwx,grx,orx上面显示的是本机上面文件默认的权限。 第二个好理解。 第一个要注意的是&#xff1a; umask的分值是指"该默认值需要减掉的权限" 第一个数字可以不管他 第二&#xff0c;三&…

linux 基础命令一

linux命令基础 hash&#xff1a;hash操做 shell搜寻到的外部命令的路径结果会缓存至kv(key-value)存储中history&#xff1a;查看历史 history命令:管理命令历史。登录shell时,会读取命令历史文件中记录下的命令:~/.bash_history&#xff0c;而且新执行的命令只会记录在缓存中:…

ceph pool 相关命令

文章目录Pool创建ec pool创建副本pool创建Pool参数创建根故障域及添加osd其他命令Tier相关Pool创建 ec pool创建 创建profile ceph osd erasure-code-profile set $profile_name k$k m$m crush-failure-domainhost crush-root$group_name 创建规则 ceph osd crush rule creat…

临平职高计算机专业高职考大学,临平职高高考再传捷报 本科连续四年蝉联杭州市第一...

又到一年放榜时&#xff0c;几家欢喜几家愁。然而&#xff0c;2018年的高考成绩出来后&#xff0c;可把临平市职业高级中学(以下简称“临平职高”)的师生们乐坏了。正所谓三年寒窗&#xff0c;开出芬芳&#xff1b;三年磨剑&#xff0c;努力未变&#xff1b;三年坚守&#xff0…

音频编辑大师 3.3 注冊名 注冊码

username&#xff1a;cae3_user000注冊码&#xff1a;beslbFVpFEhxvxA0F23xW7heAeWoWjuWhvBIMN0Je1o我试过了&#xff0c;绝对能够用。转载于:https://www.cnblogs.com/mfrbuaa/p/3858221.html

兰戈 —— Rango

2019独角兽企业重金招聘Python工程师标准>>> 一部西部卡通片&#xff0c;据说恶搞了《正午》这部著名的西部片&#xff0c;可惜我没有看过《正午》。非常喜欢这部片子里的音乐&#xff0c;恢宏大气。 剧情&#xff1a; 兰戈&#xff08;约翰尼德普 Johnny Depp 配…

C#/.Net判断是否为周末/节假日

判断节假日请求的Api&#xff1a;http://tool.bitefu.net/jiari/ /// <summary>/// 判断是不是周末/节假日/// </summary>/// <param name"date">日期</param>/// <returns>周末和节假日返回true&#xff0c;工作日返回false</retu…

ceph 部署单机集群

文章目录ceph-deploy部署集群ceph-deploy 部署单机ceph-deploy 创建osdceph osd创建资源池ceph创建rbd块设备ceph创建fs文件系统本文档主要参考ceph官方命令进行部署&#xff0c;使用的时侯ceph-deploy原生命令方式进行集群各个组件的创建&#xff0c;删除&#xff0c;后续会增…

hdu-4302-Holedox Eating-线段树-单点更新,有策略的单点查询

一開始实在是不知道怎么做&#xff0c;后来经过指导&#xff0c;猛然发现&#xff0c;仅仅须要记录某个区间内是否有值就可以。 flag[i]:代表i区间内&#xff0c;共同拥有的蛋糕数量。 放置蛋糕的时候非常好操作&#xff0c;单点更新。 ip&#xff1a;老鼠当前的位置 寻找吃哪一…

华南理工计算机基础知识题,华南理工_计算机应用基础_随堂练习答案(2017年)

华南理工_计算机应用基础_随堂练习答案(2017年) (18页)本资源提供全文预览&#xff0c;点击全文预览即可全文预览,如果喜欢文档就下载吧&#xff0c;查找使用更方便哦&#xff01;19.9 积分&#xfeff;. . . .华南理工-计算机应用基础-随堂练习答案(2017年)第一章 计算机基础知…

python 添加进度条

安装&#xff1a; pip install tqdm使用&#xff1a; from tqdm import tqdm import time for i in tqdm(rang(10)):time.sleep(0.1)转载于:https://www.cnblogs.com/royfans/p/10271496.html

ceph osd 相关命令

混合osd的部署 先部署所有的ssd 在/etc/ceph.conf中最后添加ssd做osd的block大小如下&#xff1a; 比如部署中有两个ssd&#xff0c;则添加 [osd.0] bluestore_block_size xxxx [osd.1] bluestore_block_size xxx 如上的size大小计算如下&#xff0c;如ssd容量为800G&#x…

一万年太久,只争朝夕

好久没有写了&#xff0c;很多东西都已经忘记&#xff0c;不是因为别的&#xff0c;仅仅是觉得经历太多&#xff0c;没有地方装载那么多&#xff0c;想想以前的愿望&#xff0c;想过要当作家、想过要开个小店&#xff0c;但是看看现在&#xff0c;一切都变得遥不可及&#xff0…

上海职称英语和计算机考试时间,上海职称英语考试时间

上海2015年职称英语考试时间为12月25日到2015年1月15日&#xff0c;报名网站为&#xff1a;上海职业能力考试院。2015年如何短时间攻破职称英语考试关键点一&#xff1a;调整好备考心态&#xff0c;树立信心&#xff0c;切记懂乱、随便放弃总的来说&#xff0c;职称英语考生以中…

Caliburn.Micro 资源随时添加

Caliburn.Micro – Hello World http://buksbaum.us/2010/08/01/caliburn-micro-hello-world/ http://blog.csdn.net/xbgzs2010/article/details/18447625 转载于:https://www.cnblogs.com/ifendou/p/3870256.html

ros-kinetic install error: sudo rosdep init ImportError: No module named 'rosdep2'

refer to: https://blog.csdn.net/yueyueniaolzp/article/details/85070093 方法一 将Ubuntu默认python版本设置为2.7方法二 终端输入命令sudo apt-get install python3-rosdep转载于:https://www.cnblogs.com/xbit/p/10275218.html