整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
包之后文件、图片、背景图资源不存在或者路径错误的问题
先看下项目的config文件夹下的index.js文件，这个配置选项就好使我们打包后的资源公共路径，默认的值为‘/’，即根路径，所以打包后的资源路径为根目录下的static。
由此问题来了，如果你打包后的资源没有放在服务器的根目录，而是在根目录下的mobile等文件夹的话，那么打包后的路径和你代码中的路径就会有冲突了，导致资源找不到。
所以，为了解决这个问题，你可以在打包的时候把上面这个路径由‘/’的根目录，改为‘./’的相对路径。
这样的的话，打包后的图片啊js等路径就是‘./static/img/asc.jpg’这样的相对路径，这就不管你放在哪里，都不会有错了。
但是，凡是都有但是~~~~~这里一切正常，但是背景图的路径还是不对。因为此时的相对就变成了static/css/文件夹下的static/img/xx.jpg，但是实际上static/css/文件夹下没有static/img/xx.jpg，即static/css/static/img/xx.jpg是不存在的。此时相对于的当前的css文件的路径。所以为了解决这个问题，要把我们css中的背景图的加个公共路径‘../../’，即让他往上返回两级到和index.html文件同级的位置，那么此时的相对路径static/img/xx.jpg就能找到对应的资源了。
那么怎么修改背景图的这个公共路径呢，因为背景图是通过loader解析的，所以自然在loader的配置中修改，打开build文件夹下的utils文件，找到exports.cssLoaders的函数，在函数中找到对应下面这些配置：
找到这个位置，添加一上配置，就是上图红框内的代码，就可以把它的公共路径修改为往上返回两级。这样再打包看下，就ok了！
喽大家好，我是胖达。本期视频来看看路径相关的内容。我们知道在网页中存在很多的图片，如果把这些图片和html文档放在一起，这样不光不美观，管理起来也非常不方便。通常会新建一个专门用来管理图像资源的文件夹，当需要查找图像的时候就会选择使用路径的方式来指定图像文件的位置。
路径的类型又分为两种，第一种是相对路径，第二种是绝对路径。今天先来了解一下相对路径。相对路径是相对于当前文件的位置来表示资源，也就是图片位置的路径表达方式。简单来说就是图片相对于当前html文档的位置。这里把相对路径的分类给大家列出来了，一个一个往下看。
·首先是同级路径。同级路径不需要在html里面写任何符号，只需要将文件名写到html属性里就可以了。在代码里看一下，这里有一个image，点jpg的图片和html文档处于同一级，所以在html的属性里直接写image，点jpg保存一下看看效果。
可以看到现在图片是正常展示的，同级路径下只需要在html属性里完整填写图像文件的名称就可以了。
·再来看第二个下级路径。当图像文件位于html文件下一集时，需要在html属性里完整填写同级文件夹的名称，然后斜杠写出对应图片文件的名称。
→首先打开资源文件夹，在这里新增一个images的文件夹。将image图片文件复制一份放到images文件夹里。
→打开vscode，新建一个gtml文档，这里新增一个image标签。
→在左侧资源管理器中刚刚新增的images文件夹已经显示出来了，打开以后会发现里面有一个image，点jpg的图片。把这个路径写一下，在src属性里面写入位于当前html文件同级的images文件夹的名称，使用符号斜杠找到image，点gpg，看一下效果。此时图片也完整显示出来了。
→如果在amager四文件夹里还有一个amager四文件夹，下级路径又该怎么写？在amager文件夹里再新建一个文件夹，打开vscod，在左侧的资源管理器中a major s文件夹下面又新增了一个a major s文件夹，在这里面又放了一张图片。
这张图片应该怎样让它展示出来？一起来看一下。
→首先找到同级的images文件夹，使用符号斜杠，此时vscode会提供给两个选项，一个是imagers文件夹，另一个是imager.gpg。选择imagers，imagers文件夹里面的imager.gpg的文件了，保存一下看看效果。
在浏览器中这两张图片都完美的展现出来了。
最后来看一下相对路径里面的。上级路径使用的符号是点点杠。上级路径又应该怎么理解？也就是图像文件是位于当前这个 hd ml文件的上一集。
在练习文件夹里新增一个名为 hd ml的文件夹，打开vs code，选择刚刚新增的文件夹，选择新建文件，这里需要新增一个 hd ml文档。在当前 hd ml文档中，如果想要调用上一级的 image 点 j p g 的图片应该怎么做？在 sr c 属性里面使用点点杠。
这里 vs code提供了上一集路径中存在的文件，选择 image 点 j p g，在浏览器中看下效果，此时图片也是正常显示的。如果hd ml文件藏得更深一些，把当前的文件复制一份，新增一个hd ml文件夹，将复制的文档粘贴一下，打开刚刚复制的文档，修改sr c属性里面的值，使用点点杠。
此时是没有找到 amage 点 j p g 的文件，这个时候就需要重复刚刚的操作，点点杠就能找到需要到的 amage 点 jbg 的文件了，保存一下看看效果。这里可以看到图片还是正常显示出来了。
本期视频主要了解了相对路径的三种分类，一个是同级路径，一个是下级路径，还有一个是上级路径。希望小伙伴们下来可以好好练习一下，这对于后期的内容非常重要。下期再来聊聊绝对路径。本期的内容到此结束，感谢观看，下期再见。
eb标准：
由于不同浏览器解析出来的网页效果可能不同，所以需要通过web标准对其进行约束使其一致，主要包括三个方面：
结构标准：
结构用于对网页元素进行整理和分类，主要指的是HTML。
表现标准：
表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为标准：
行为是指网页模型的定义及交互的编写，主要指的是 JavaScript。
初识HTML：
html 全称 Hyper Text Markup Language ，中文译为：“超文本标记语言” ，描述网页的一种语言。
HTML发展：
XHTML 是一个 W3C 标准，可扩展超文本标签语言（EXtensible HyperText Markup Language），更严格更纯净的 HTML 版本，作为一种 XML 应用被重新定义的 HTML。
HTML中的注释：
<!-- 注释标签：注释的内容 -->条件注释：
条件注释的作用是：定义只有Internet Explorer才执行条件注释中的html标签。
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->HTML骨架：
<!DOCTYPE html> <!-- 声明文档类型版本为html5 -->
<html lang="en"> <!-- 网页的跟标签,lang=""用来设置网页语言，其值还有zh-CN中文简体、fr法语等，设置后当系统设置语言和网页语言发生冲突时会提示是否翻译网页 -->
<head> <!-- 网页的头部 -->
<meta charset='UTF-8'> <!-- 声明字符编码，其值还有gbk和gb2312 -->
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0"> <!-- 开启移动端视口 -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 开启ios快捷启动方式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 设置iOS顶部通栏样式 -->
<meta name="format-detection" content="telephone=no"> <!-- 遇到数字不转成电话号码 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- X-UA-Compatible是针对IE浏览器做兼容的，ie=edge表示兼容edge，若后面ie=7，则表示兼容IE7 -->
<meta name='keywords' content='This is a key words'> <!-- 网站搜索关键字 -->
<meta name='description' content='this is description'> <!-- 描述网站的信息 -->
<link rel="shortcut icon" type="image/x-icon" href="图片路径 "/> <!-- 网站的图标，如果图标是gif图，则需要改：type="image/gif"，引入网站图标另一种方法：命名为favicon.ico文件放到网站根目录下 -->
<link rel="stylesheet" type="text/css" href="css文件路径"/> <!-- 引用css文件 -->
<base target="_blank"/> <!-- base标签，定义这个网页中a链接打开窗口的方式，其值还有_self -->
<title>标题</title> <!-- 网站的标题 -->
<style type="text/CSS"> /* 用来写CSS代码，type="text/CSS"可以省略 */
div{width:100px; height:100px; color:white;}
</style>
</head>
<body> <!-- 网页的主体 -->
<h1>标题</h1> <!-- 标题标签，共六个级，分别为：h1~h6,大小逐级递减，h1在一个网页中只允许出现一次。 -->
<p>段落</p> <!-- 段落标签 -->
<hr/> <!-- 单线标签,所有单标签后面的关闭符均可以省略 -->
<br/> <!-- 换行标签 -->
</div></div> <!-- 无语义化标签布局用,上面的标签是语义化标签 -->
<span>span</span> <!-- 无语义化标签分割用 -->
<strong>加粗</strong> <!-- 加粗标签 -->
<b>加粗</b> <!-- 加粗标签 -->
<i>倾斜</i> <!-- 倾斜标签 -->
<em>倾斜</em> <!-- 倾斜标签 -->
<s>删除线</s> <!-- 删除标签 -->
<del>删除线</del> <!-- 删除标签 -->
<u>下划线</u> <!-- 下划线标签 -->
<ins>下划线</ins> <!-- 下划线标签 -->
<img src="图片路径" alt="图片无法加载，提示文字" title="鼠标悬停，提示文体" border="2"/> <!-- 图像标签，border是边框属性，width和height属性设置图像的宽度和高度 -->
<a href="跳转目标" target="_self">链接的命名</a> <!-- 链接标签，target属性为链接页面打开的方式，默认值_self为自身打开；_blank为新窗口打开；_new为新窗口打开，相同页面只会打开一个;_top跳出框架-->
<ul> <!-- 无序列表 -->
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<ol type="A"> <!-- 有序列表,属性type可以控制li序号的样式，其属性值有：1、A、a、I、i-->
<li>中国</li>
<li>美国</li>
<li>英国</li>
</ol>
<dl> <!-- 自定义列表 -->
<dt>分类1</dt> <!-- 分类名称 -->
<dd>分类1第1项</dd> <!-- 类的项 -->
<dd>分类1第2项</dd>
<dt>分类2</dt>
<dd>分类2第1项</dd>
<dd>分类2第2项</dd>
</dl>
<table> <!-- 定义表格，table标签实际就是一个四方块框框，里面有单元格才会显示出表格的样子 -->
<caption>信息表</caption> <!-- 表格标题 -->
<tr> <!-- 定义行 -->
<th>姓名</th> <!-- 定义表头，表头文本有加粗居中效果 -->
<th>年龄</th>
<th>性别</th>
</tr>
<tr> <!-- 定义行 -->
<td>小明</td> <!-- 定义单元格，表格里面没有列-->
<td>18</td>
<td>男</td>
</tr>
</table>
</body>
</html>提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海123
其它问题可通过以下方式联系本人咨询：
QQ：810665436
微信：ConstancyMan
*请认真填写需求信息，我们会在24小时内与您取得联系。
