Question

到目前为止，我一直使用这个项目结构

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

如果我尝试

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更改哪些内容才能实现此目的？

Answer 1

更好的方法是使用startPath，

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

这样，不需要调整其他路径。

Answer 2

浏览器同步（尚未）能够为SPA提供服务（单页应用程序）。如果要使用HTML5路由，则会遇到问题。阅读here。

对于Angular2应用程序开发，更好的解决方案是使用'lite-server'。这是建立在浏览器同步的基础上，可以在SPA环境中使用它。

你应该把它添加到你的bs-config：

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

启动服务器，如：

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

如果index.html在src文件夹中，如何配置BrowserSync？

2 个答案: