前端引用路径的解析
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 --save2. 编写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，页面展示如下：
转自：
扫一扫
635
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
