脚本 src 的 HTML 相对路径问题
[英]HTML relative paths issue for script src
问题描述
I have an issue with a website I built from angular.
我从 angular 构建的网站有问题。 In index.html , there are references to javascript files, but my problem is this: in the HTML, the paths are relative to the file but the browser looks for the files in the root dir:在index.html ，有对 javascript 文件的引用，但我的问题是：在 HTML 中，路径是相对于文件的，但浏览器在根目录中查找文件：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RasaBE</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-->
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>
This works fine when everything is in the root folder of my website, but I wanted to have everything in a subfolder /bo/ .当所有内容都在我网站的根文件夹中时，这可以正常工作，但我想将所有内容都放在子文件夹/bo/ 。 So index.html is in localhost/bo/index.html and so are all the scripts.所以index.html位于localhost/bo/index.html ，所有脚本也是如此。 Since it's a relative path in the code I'd expect my browser to look for localhost/bo/script.js , but instead it looks for localhost/script.js .由于它是代码中的相对路径，我希望我的浏览器查找localhost/bo/script.js ，但它查找localhost/script.js 。
A screenshot to show what's wrong:显示错误的屏幕截图：
I tested this in Chrome and I have the same issue.我在 Chrome 中对此进行了测试，但遇到了同样的问题。 It's a bit complicated to change the paths directly since it's compiled from angular, and I'd probably have to change it every time it compiles.直接更改路径有点复杂，因为它是从 angular 编译的，我可能每次编译时都必须更改它。 Is this an issue with Firefox and the way it deals with relative paths?这是 Firefox 及其处理相对路径的方式的问题吗？
I should also add that host/bo/inline.bundle.js exists and can be found by the browser but the it looks for it in the root folder instead of the same folder as index.html .我还应该添加host/bo/inline.bundle.js存在并且可以被浏览器找到，但它在根文件夹中查找它，而不是与index.html相同的文件夹。
3 个解决方案
解决方案1
4 已采纳 2018-06-14 13:49:56
This "base" element sets the default location for the page.这个“基本”元素设置页面的默认位置。
Remove消除
<base href="/">
OR或者
<base href="/bo/">
解决方案2
1 2020-11-07 09:20:49
If you want your Angular Webapp run from every subfolder without touching the code如果您希望您的 Angular Webapp 在不接触代码的情况下从每个子文件夹运行
Change改变
<base href="/">
To到
<base href=".">
Removing the "base" element won't work since Angular throws then an error complaining about the missing element.删除“基本”元素将不起作用，因为 Angular 会抛出一个错误，抱怨缺少的元素。
解决方案3
0 2018-06-14 13:49:43
It turns out it was all because of the tag that is added by angular, editing it to <base href="/bo/"> makes it work.原来这都是因为 angular 添加的标签，将其编辑为<base href="/bo/">使其工作。 since it's just one line to change I consider it fixed.因为它只是一行更改，所以我认为它已修复。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.