在浏览器引用的 css 或 js 中加载本地文件答案

【问题标题】：Loading local file in browser referenced css or js在浏览器引用的 css 或 js 中加载本地文件
【发布时间】：2014-12-04 10:46:56
【问题描述】：

这可能是一个基本问题，但有些方法对我不起作用。

这是我的html：

<!doctype html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <base href="/">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="app/app.css"/>
  </head>
  <body ng-app="App">
    <div> Hi There</div>

    <script src="app/vendor.js"></script>
    <script src="app/app.js"></script>
</body>
</html>

此文件位于：file:///Users/kiran/Documents/app/dist/public/index.html 参考文件位于：

app.css: file:///Users/kiran/Documents/app/dist/public/app/app.css
vendor.js: file:///Users/kiran/Documents/app/dist/public/app/vendor.js
app.js: file:///Users/kiran/Documents/app/dist/public/app/app.js

但是，当我尝试使用 browser->open 打开文件时，它说它无法加载错误的文件：

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///app/app.css
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///app/vendor.js
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///app/app.js

尽管错误消息不同，但在 firefox 中的行为是相同的。我必须做些什么才能让它发挥作用？感谢您的帮助。

注意：当我运行网络服务器时它可以正常工作，但我需要使用本地引用以及网络服务器使其工作。

【问题讨论】：

标签： javascript css html angularjs google-chrome

【解决方案1】：

删除

<base href="/">

使用 ./ 前缀编辑链接

src="./app/vendor.js"

【讨论】：

【解决方案2】：

这是因为你有<base> 标签。

The base URL to be used throughout the document for relative URL addresses.

由于基本 URL 的 href 是 '/'，它总是从根开始。所以在本地机器上它找不到任何 css/js 文件，因为它会检查来自根目录的文件，即C/D/E drive。它完全适用于网络服务器，因为根目录是您的公共文件夹。

去掉base标签。

【讨论】：