web中的资源引用问题

在web开发时，我们首先就会在 index.html 文件里面引入 .css 样式文件和 .js 脚本文件，并且毫无疑问，在填写引入的路径时，直接写上 .css（.js）文件 相对于 index.html 的路径就可以了。

但是在 .css 或 .js 文件中，再去引入其他的资源，关于引用路径的写法，是否直接填上目标资源相对于 .css （或 .js ）的路径就可以了呢？

在 js 中引用图片资源时，引用地址是相对于谁呢

例如在 test 文件夹下有如下文件：

index.html 的内容如下：

现需要给 的元素设置一个背景图，背景图片为 image 文件夹下的 node.jpg 图片。

在 layout.css 文件中设置背景图，layout.css 内容如下：

可以看出，图片的地址是，该图片相对于 layout.css 文件的路径。

在 main.js 文件中设置背景图，main.js 内容如下：

可以看到，图片的地址并不是 node.jpg 图片相对于 main.js 文件的路径，实质上这里的图片地址是 node.jpg 图片相对于 index.html 文件的路径。

.js 文件中引用图片等静态资源时，引用地址是图片相对于其宿主的相对路径。（谁引用了该 .js 文件，谁就是宿主，这里宿主指的就是 index.html ，所以引用地址就是 node.jpg 图片相对于 index.html 文件的路径。）

Vue-cli 项目中的资源路径

相信每个使用 vue 的新童鞋，都遇到过这样的问题，通过 Vue-cli 脚手架生成项目时，在本地 跑起来相当好，但是通过 打包后部署到服务端后，再去访问时，会报出 404（not found）的错误信息。

这也是一个资源引用路径的问题，Vue-cli 初始化的项目，默认打包后的项目文件是放在根目录中的，其根路径设置的是 '/'，然而很少会有人把整个项目文件直接部署在服务器的根目录，通常是部署在服务器根目录中的某个文件夹下，这时就需要更改项目引用资源的根路径了，将 config/index.js 文件中 build 对象中的 assetsPublicPath 属性值由 ‘ / ’ 改为 ‘ . / ’。