前端引用路径的解析

1、客户端路径(客户端目录)

href、src、url里的相对地址、完整地址是被浏览器解析的，称为客户端路径。下面仅对相对路径进行描述。遵循的原则：

/指根路径

../回到上一级路径

./当前路径

上述路径均指浏览器地址栏里的路径，而非服务器上的实际物理路径。

例：浏览器地址栏为 http://localhost:9099/a/b

那么 href、src、url里的 ../ 指回到了a路径，/回到了a的上级路径，即根路径 ./ 指b路径

2、客户度路径和服务器上的物理路径之间的关系

接着上述示例，引用js的src写 src=“../project/model.js” 浏览器会发送一个请求该js文件的http请求，地址为http://localhost:9099/a/project/model.js

服务端会对该请求进行解析。下面以本公司node为例进行说明解析规则，其它web服务器类似。解析规则：项目启动时，使用express设置了静态资源路径，即项目目录内的public文件夹，那么node端在收到上述请求后，会去找寻public/a/project/model.js，如果找到了，则把该文件响应给浏览器端，如果没有找到，则把该请求的解析权移交给自定义路由，由自定义路由进行解析并作出响应，如果public内既没有对应的文件，也没有对应的自定义路由，那么浏览器端会收到一个404的响应

说几点：

服务器上的实际物理路径：本地代码的路径（本地开发代码的的结构各个文件路径）

静态资源路径：就是在服务器上存放本地代码的位置（存放html,css,js,image等文件） -- 该路径是一个文件夹，这个文件夹存放的东西就是本地开发环境中的所有东西（前端）。该文件夹是后台设置（这里是用node的express设置了一个叫public的文件夹用来存放前端的所有的代码）注：个人觉得public这个文件是在服务的配置文件中设置的。

begin:

关于如何设置静态文件夹的根目录--

比如apache:通过在服务器端修改配置。让url指定到自己本地路径代码。-

end -- 这只是我个人的理解

关于说浏览器中的客户端路径。

在我们开发时在css中的link,src,url 使用的路径就是客户端路径。不是本地代码的文件路径。是相对于浏览器中url的路径

以我接触的项目为例：因为该项目套了一层iframe，我们的项目代码实际是在iframe中。所以url的地址为http://1.1.1.1:6666/xx

如果url的地址为这种。只要一个/xx则只要我在代码中写../就可以直接指向到public文件夹。

这段话什么意思，打个比方

public/a/a1/a2/a.html

public/b/b/b.html

想在a.html中引入b.html这应该如何使用路径

根据项目的URL可知是http://1.1.1.1:6666/xx形式。

所以b.html中这么写<script src="../a/a1/a2/a.html"> </script> ../直接就可以访问到public文件夹（至于为什么会到public文件夹，这这是node端(后台)express设置好的(人为设置的)）,href,src,url都是依据这样去设置的

同理：如果项目URL是http://1.1.1.1:6666/xx1/xx2形式。

这种形式。则b.html中这么写<script src="../../a/a1/a2/a.html"> </script> 需要../../才能到public文件夹。

如果项目URL是http://1.1.1.1:6666/xx1/xx2/xx3形式。

这种形式。则b.html中这么写<script src="../../../a/a1/a2/a.html"> </script> 需要../../才能到public文件夹。

希望可以理解

另附：服务器部署静态页面（前端）

https://blog.csdn.net/su_ling/article/details/70254638

关于express设置静态资源文件夹

NodeJS + express访问html、css、JS等静态资源文件

原先做前端开发时都是用XAMPP或LAMP，把HTML、CSS、JS等前端资源放到htdocs下，测试自己的前端代码，但有些不方便的地方是，在调用Ajax请求后无法模拟请求返回的数据，最近学了点NodeJS，就用NodeJs来做Web服务器。因为最终与后台交互的是用Java作开发语言的，所以就不用jade、ejs等模板了，只是单纯地作为一个静态服务器以及模拟处理Ajax数据请求

1. 初始化项目

1.1. 环境搭建

先安装NodeJs、npm(自带)，国外的镜像资源访问慢的话，可以考虑使用taobao的资源，用npm安装nrm来管理registry的路径,比较常用的是taobao，也可以用cnpm或者其他的

1.2. npm初始化项目

npm初始化项目

npm init

初始化时可以对package.json进行配置，全部默认即可，若有兴趣可看下express的package.json，一般情况下标准的配置项，express的package.json中都有体现

1.3. 安装express

express的安装很简单，使用以下命令安装

npm i express --save

2. 编写app.js

app.js代码如下：

const express = require('express')
const path = require('path')
const app = express()

app.use(express.static(path.join(__dirname, 'public')))

app.listen(8080, () => {
  console.log(`App listening at port 8080`)
})

其中最主要的部分是app.use(express.static(path.join(__dirname, 'public')))，该行代码是在express添加中间件，设置静态资源路径为public，所有的HTML、CSS、JS等文件都放在public下即可，后续代码迁移直接将public下的代码copy到Java Web的webRoot中就行

3. 添加测试页面

在public中添加测试页面

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Web管理平台</title>
</head>
<body>
  <h1>Web管理平台</h1>
</body>
</html>

## 4. 启动APP应用 ##
添加完后，启动APP应用

node app.js

控制台输出App listening at port 8080,说明NodeJs的Web应用已经跑起来了

在浏览器中输入127.0.0.1:8080，页面展示如下：

转自：

https://www.cnblogs.com/qingbin-bai/p/6271388.html

关于相对路径详解