如何解析html中的路径得到最终的url呢?

Question

如何解析html中的路径得到最终的url呢?

访问http://localhost:3000/dist/index.html
这里的index.html会通过script和link标签导入需要的js和css。

    <script type="module" crossorigin src="/assets/index-BgnkCtKv.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-Dm30hxWm.css" />

浏览器解析到这段html时，会发送两个http请求，url为

http://localhost:3000/assets/index-BgnkCtKv.js
http://localhost:3000/assets/index-Dm30hxWm.css

为什么不是

http://localhost:3000/dist/assets/index-BgnkCtKv.js
http://localhost:3000/dist/assets/index-Dm30hxWm.css

如果我将地址改为相对地址的形式./assets...,得到的url还是没有变化。

我使用serve这个静态服务器的时候，使用了./assets..或者assets/..这种相对地址形式，最终的url依然为/assets....。
但是我使用servor这个静态服务器的时候，被解析为/dist/assets...。

解析的工作不是在浏览器上进行的吗？和使用什么静态服务器有什么关系？上面的行为让人匪夷所思。

我在stacblitz上复现了该问题

• 执行npm start(使用servor作为服务器),访问/dist/index.html成功。
• 执行npm run dev(使用serve作为服务器)，访问/dist/index.html报错(/index.css没不存在)。

Answer 1

src="/assets/index-BgnkCtKv.js"> 这种以/开头的，会使用根目录。即http://localhost:3000

改成这种assets/index-BgnkCtKv.js" 就会使用相对路径。

Answer 2

这部分可以从 MDN 文档中去了解 👉 #绝对 URL 和相对 URL - 什么是 URL？ - 学习 Web 开发 | MDN

简单的总结就是：

1. 如果 URL 的路径部分以 “/” 字符开头，则浏览器将从服务器的顶部根目录获取该资源，而不引用当前文档给出的上下文
2. 如果 URL 不以 / 开头，浏览器将尝试在包含当前资源的子目录中查找文档。

🌰 如果我们当前处于 https://developer.mozilla.org/zh-CN/docs/Learn 的页面上，那么：

• 如果请求地址是 /zh-CN/docs/Learn 这种开头是 / 的绝对地址，那么浏览器会自动处理成 👉 https://developer.mozilla.org/zh-CN/docs/Learn
• 如果请求地址是 Skills/Infrastructure/Understanding_URLs 这种开头没有 / 的地址，那么浏览器会处理成 👉 https://developer.mozilla.org/zh-CN/docs/Learn/Skills/Infrastructure/Understanding_URLs
• 如果请求地址是 ../CSS/display 这种相对路径，那么浏览器会在当前页面路径上往上退回一个目录，处理成 👉 https://developer.mozilla.org/zh-CN/docs/CSS/display （https://developer.mozilla.org/zh-CN/docs/Learn/../CSS/display 的简化版本）

示例部分MDN文档中也有解释，可以直接看文档。

---

Edit

我觉得你需要看一下脚手架关于 base 部分的文档，你就知道为什么 npm run dev 的时候，你请求 /dict/css/style.css 为什么是 404 了。

• #publicPath - 配置参考 | Vue CLI
• #base - 共享选项 | Vite 官方中文文档

Answer 3

在 html 中有个 base 标签就是专门解决路径问题的
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

<base href="/dist/">