当前位置:首页 » 网页前端 » 前端相对路径
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端相对路径

发布时间: 2023-08-07 00:07:02

A. 网站的URL路径如何设置

想要知道网站的URL路径如何设置,就必须要了解URL路径分类有哪些?网站技术人员一般会通过调用图片、CSS以及JS代码来对网站进行设计。而这种调用模式一般分为两种,一种是相对路径,另一种是绝对路径。用专业的话来说就是相对URL和绝对URL。

1、相对路径

我们都知道打开正确的网址才能获得想要的网站。同样,网站里的图片、样式以及特效也是正确的路径才能获取到。在新手学习前端代码的时候,往往会因为调用错误而导致图片不能显示、样式显示错误、特效无法显示等问题。而这个配拆携时候我们就要学会怎么设置路径了,路径对了,图片、样式、特效就能正常显示了。

优点:相对路径的优点就是容易移动,可以通御轮过整个文件夹进行移动进行移动,测试本地网站也会更加方便。

缺点:相对路径的缺点就是如果代码不够严谨,当移动文件夹之后,部分页面可能会出现错乱现象,而且如果使用相对路径后,很容易被整站抄袭。

2、绝对路径

相对路径是相对某个文件夹下的单独调用,而绝对路径是指固定的某个文件夹下的调用。绝对路径调用起来与相对路径相比更加单一,也更加稳定,如果不单独修改这一路经下的资料,是绝对无法更改和使用该路径下的内容。

绝对路径使用的地方较少,没有特殊需求的情况下是不会使用的。培伏但是这种绝对路径通常会出现在抄袭网站中,有些抄袭网站的人为了省事,所以会直接使用对方的网址。

优点:绝对路径的优点是,如果有人抄袭你的网站内容,里面的链接还会指向你的网站。有些抄袭者比较懒,根本不会修改里面的内容。其实也不局限于被抄袭,如果有人将你的网页保存到本地计算机中,里面的链接、图片、CSS以及JS仍然会连接到你的网站上。当网页内容被修改的时候,因为使用的是绝对路径,所以依然会指向正确路径。

缺点:绝对路径的缺点是在本地测试的时候,如果使用某一个地址的话,后期网站正式上线修改起来会非常麻烦的。

所以说想要知道网站的URL路径如何设置,就要详细了解URL的一些常识,这样才能对网站有所帮助。

B. qiankun 微前端应用实践与部署(四)

一般情况下,我们对应用进行配置打包,要对图片字体等资源进行下面配置,使得资源路径正常加载。但是,在微前端模式下,子应用打包部署后,往往会出现子应用 css 文件里面引入资源路径加载失败的问题,下面就让我们来探究一下。

👉 独立应用下的 url-loader 配置:

因为 url-loader 的 options 项的属性 publicPath 属性默认是 '' ,表示相对路径,即打包出来的资源引用 url 都会加上相对路径寻找 static 静态资源入口,比如:

所有应用编译打包部署后,当主应用加载子应用,子应用加载自身的 css 文件样式时,由于 其对应的 css 文件里面的图片 url 引用是相对路径,会出现子应用的资源相对路径拼接主应用 domain 的情况,即子应用的 ../../static/img/bg_header.790a94f4.png 会在主应用的 domain 下进行资源的寻找,导致加载失败 404 的情况。

如果项目有用到第三方库,比如 element-ui ,那么就更有必要进行处理了。因为 element-ui 的字体图标是在 css 里面引入的,还有相关背景图片的引入也是在 css 里,所以需要配置 webpack 的 url-loader ,生产模式情况下直接指定资源前缀,使之成为绝对路径。

这样配置后,打包出来的 css 样式文件会变成:

资源是绝对路径,就不会出现上面子应用资源加载失败的情况。

但是,这种前端配置文件写死路径的做法灵活性并不好,比如不能做到编译一次,任意部署,因为路径写死,所以如果需要部署到其他服务器的话,就需要重新编译了。

接下来,讲的是实现灵活部署的方案。

我们在只编译打包一次前端应用的前提下,为了实现灵活部署,需要借助 nginx 来实现。

下面以 vue-cli 3 的配置为例,与 vue-cli 2 只是写法上的区别,其他都一样。

假设主应用部署地址是 192.168.2.192 ,子应用的部署地址是 192.168.2.192:7102 。

打包编译部署后,子应用的 css 文件里面的图片资源引用 url 如下:

主应用加载子应用的时候,子应用的资源拼接主应用 domian 后,子应用的 css 文件里面的图片资源加载路径 url 就会变成:

此时的关键就是要访问到子应用的资源,而不是去主应用资源目录去找。

所以我们采用 nginx 路径代理转发端口的方案,当应用访问 192.168.2.192/live 这个路径时,经过 nginx 进行路径代理转发配置,转发到子应用端口。

配置 nginx 代理规则:

此时真正访问的资源路径(子应用资源路径)是:

👋 至此,通过修改配置 url-loader 的 publicPath 以及配置 nginx 的路径代理转发,就可以实现编译打包一次,到处部署的目的。

C. 求大神前端名词解释:URL、路径、地址、域名,最好能举例说明

这几个词除了url和域名指代非常明确,其他都是翻译的所以有时会有混用的情况——比如A书里说的地址,有可能就是B书里说的url或者路径,但是一般来说解释如下:
url是资源地址——格式如下:
协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志
比如:
http://www..com/
file:///C:/Users/computer/Desktop/abcd.pdf
http://192.168.0.1:8080/abcd/a.php?file=abcd
路径一般指文件路径,分为相对路径和绝对路径:
相对路径:../images/a.jpg
绝对路径:C:\
地址一般说的是ip地址:
192.168.0.1
域名说的是由绑定了ip地址,由DNS解析的别名,通俗的说就是我们访问网站的根网址比如:
www..com
这就是一个域名

D. web前端开发基础如何链接两个html文档

如果使用绝对路径,那就在什么文件夹里面都没有问题了
如你要求在F盘:<a href="f:\###.htm>链接文字</a>
但此链接只能在你的计算机上面使用,如果要传送到服务器端,那就必须使用相对路径
就是说链接的文件相对于你现在所使用文件所在的位置,如果在同一文件夹,直接链接那个文件的名字
<a href="###.htm>链接文字</a>
在子目录admin下面,注意相对路径是使用的左斜杠
<a href="admin/###.htm>链接文字</a>
在此目录的上一级目录使用
<a href="../###.htm>链接文字</a>