在浏览器中引用本地文件引用css或js

时间:2014-10-09 13:21:45

标签: javascript css html5 angularjs google-chrome

这可能是一个基本问题,但有些不适合我。

这是我的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-&gt; 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中的行为相同。我需要做些什么来使它工作? 感谢帮助。

注意:当我运行网络服务器时,它运行正常,但我需要使用本地引用和网络服务器。

2 个答案:

答案 0 :(得分:6)

发生这种情况,因为您有<base>代码。

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

由于基本网址href为&#39; /&#39;,因此它始终从root开始。所以在本地机器上它没有找到任何css / js文件,因为它会检查来自root的文件,即C/D/E drive。它完全适用于webserver,因为root将是你的公共文件夹。

删除base代码。

答案 1 :(得分:1)

删除

<base href="/">

使用./前缀

编辑链接
  

SRC =&#34; ./应用程序/ vendor.js&#34;