如果index.html位於src文件夾內，如何配置BrowserSync？

到目前爲止，我一直用這個項目結構如果index.html位於src文件夾內，如何配置BrowserSync？

project/ 
| 
+---src/ 
| | 
| +---app/ 
| 
+---node_modules/ 
| 
+---index.html 
+---package.json 
| 
...

這工作得很好，但好像一般的方法是有index.html的src文件夾內。如果我這樣做，我會遇到設置BrowserSync的問題。

例如，我bs-config.js設置爲

module.exports = { 
    "port": 3000, 
    "browser": "chrome" 
};

和加載頁面

localhost:3000/src/index.html

我得到

不能/src/index.html GET

如果我嘗試

localhost:3000/index.html

取而代之的是，頁面加載，但是從node_modules庫無法找到（404）。這裏是我的ìndex.html：

<!DOCTYPE html> 
<html> 
    <head> 
    <base href="/"> 
    <title>App</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="styles.css"> 

    <!-- 1. Load libraries --> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="../node_modules/core-js/client/shim.min.js"></script> 

    <script src="../node_modules/zone.js/dist/zone.js"></script> 
    <script src="../node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="../node_modules/systemjs/dist/system.src.js"></script> 

    <!-- 2. Configure SystemJS --> 
    <script src="systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
    </head> 

    <!-- 3. Display the application --> 
    <body> 
    <kma-app>Loading...</kma-app> 
    </body> 
</html>

所以現在的問題是，什麼纔是我需要bs-config.js和/或index.html更改爲得到這個工作？

來源

2016-07-07 Thorsten Westheider

瀏覽器同步尚未（但）能夠爲SPA（單頁應用程序）提供服務。如果您要使用HTML5路由，您將遇到問題。閱讀here。

對於Angular2應用程序開發，更好的解決方案是使用'lite-server'。這是建立在瀏覽器同步的基礎上的，可以在SPA環境中使用它。

你應該添加到您的BS-配置：

{ 
    "server": { "baseDir": "./src" } 
}

而像啓動服務器：

lite-server -c ./bs-config.js

來源

2016-07-07 13:21:33 PierreDuc

非常感謝您的支持，但問題（404節點的'node_modules'文件仍然不幸。 –

或者將'index.html'中的node_modules的源代碼更改爲'./../ node_modules/... ..'或'/ node_modules/.....' – PierreDuc

一個更好的辦法是使用startPath，

{ 
    "port": 3000, 
    "startPath": "src/index.html", 
    "browser": "chrome" 
}

那沒有其他途徑需要調整。

來源

2016-07-08 06:41:09

經過幾個小時的學習和學習之後，我想了解更多關於lite-server和Browsersynch的知識（比如bs-config.js和bs-config.json，等等），我得到我的index.html到一個新的文件夾，並得到它的加載頁面，但lite服務器不能再找到@angular文件來加載應用程序。我試着在systemjs.config中設置新的路徑和沒有結果，有人需要寫一個關於解決這個問題的完整的，具體的答案/教程，我被時間逼住，不在src中的源文件。 –

如果index.html位於src文件夾內，如何配置BrowserSync？

回答

相關問題