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 属性值由 ‘ / ’ 改为 ‘ . / ’。

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20180806G1Z2MN00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券