爲什麼我的網絡應用程序無法加載此腳本？

-1

使用PhpStorm，我在瀏覽器中運行了index.html（Chrome）。它找到引用的CSS文件，但在嘗試查找main.js時會引發404錯誤。該文件由gulp生成，它在那裏。文件許可權似乎也是正確的（664）。任何想法發生了什麼？爲什麼我的網絡應用程序無法加載此腳本？

我也直接在Chrome中輸入了到index.html的URL，並且有相同的問題，所以它不是PhpStorm的Web服務器。 CSS正在加載，因爲我可以看到我在body中編碼的類似引導程序的導航欄。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" href="assets/img/favicon.ico"> 
    <title>Mobile Web App</title> 
    <style type="text/css"> 
     body { 
      padding-top: 70px; 
     } 
    </style> 
    <link rel="stylesheet" href="assets/libs/bootswatch-dist/css/bootstrap.min.css"> 
    <base href="/"> 
</head> 
<body> 
    ... 

<script type="text/javascript" src="assets/js/main.js" defer></script> 
</body> 
</html>

編輯：經過DevTools，它的獲取在http://localhost:63342/app-folder/assets/libs/bootswatch-dist/css/bootstrap.min.css的CSS文件，但在http://localhost:63342/assets/libs/bootswatch-dist/css/bootstrap.min.css JS文件。這似乎是問題，但我不確定如何解決它。

來源

2016-01-03 jstudios

您正在使用PhpStorm自己的簡單內置Web服務器。要麼使用你自己的適當的Apache /任何東西，要麼你將不得不稍微改變一些配置，例如http://stackoverflow.com/a/32990633/783119，http://stackoverflow.com/a/30084552/783119 – LazyOne

明白了，看到我的答案是如何得到它的工作。當我在實際的服務器上時，我會將基礎改回爲'/'。 – jstudios

下面是我如何工作。

當我告訴PhpStorm在Chrome中打開index.html它啓動在localhost:XXXX/app-folder/index.html其中app-folder只是在PhpStorm項目文件夾。它基本上啓動它自己的內置Web服務器，這可能比直接在瀏覽器中訪問文件要好。
我可以簡單地將它重新輸入爲localhost:XXXX/app-folder/，它會起作用（注意最後的斜槓）。
此外，我不得不設置base爲/app-folder/，並留在這的<head>

底部我希望這可以幫助別人。

來源

2016-01-03 03:49:39 jstudios

閱讀@Juan Mendes回答正確的解決方案。你的，在這裏，是一個黑客。 – Rob

他的回答對我無效。我的解決方案適用於處理PhpStorm，因此它可能被認爲是黑客。這是因爲PhpStorm在使用其內置的Web服務器時在'localhost：XXXX'後追加'/ app-folder /';因此，新的道路成爲基礎。如果您使用PhpStorm的內置Web服務器，'/'的'base'會將您引導至'localhost：XXXX'，它會生成一個'404'。我確定''base''用'/'可以在Apache Web服務器上正常工作，無論它位於何處，因爲它將在'localhost'的根目錄下運行。 – jstudios

@jstudios我更新了我的答案，它有一個錯字。你似乎不明白基本標記是幹什麼的，如果因爲在你的例子中你實際上並沒有改變頁面的基本路徑，那麼你最好刪除它。 –

將<link>設置爲您的CSS後，您已設置<base>標記，因此，基數是從該頁面加載的HTML。此外，你將它設置爲根/，而不是頁面本身（而不是調整你的鏈接）

的<link>標記之前修復基地：到處

<base href="/app-folder/index.html"> 
<link rel="style sheet" href="assets/libs/bootswatch-dist/css/bootstrap.min.css">

或使用絕對路徑：

<!-- The slash in the beginning of the URL makes it absolute from the same server --> 
<link rel="stylesheet" href="/app-folder/assets/libs/bootswatch-dist/css/bootstrap.min.css">

請注意，我顯示的第一個基本標記是不必要的（因爲它將它設置爲它已有的相同的東西），您可以將其刪除。

<link rel="stylesheet" href="assets/libs/bootswatch-dist/css/bootstrap.min.css">

來源

2016-01-03 03:19:02

爲什麼我的網絡應用程序無法加載此腳本？

回答

相關問題