browser-sync指定/src目录提供文件失效，请求排查方案

嘿，这个问题我之前也碰到过！既然端口修改有效，说明Browser Sync的配置确实在生效，那问题大概率出在文件路径匹配或者索引文件设置上，下面给你一步步排查：

可能的原因&对应解决办法 #

1. 索引文件不在指定的server根目录 #

Browser Sync默认只会在你配置的server目录（也就是src）的根路径下查找索引文件。

• 先确认你的index.html是不是直接放在src文件夹里，而不是子目录（比如src/pages/index.html这种）。如果在子目录，要么把文件移到src根目录，要么修改server的baseDir到对应子目录，比如：

  server: "src/pages"
  

2. 索引文件名不符合默认规则 #

Browser Sync默认会优先查找index.html，如果你的文件叫其他名字（比如home.html、index.htm），就会找不到。

• 解决办法是在配置里手动指定索引文件名：

  server: {
    baseDir: "src",
    index: "home.html" // 替换成你的实际文件名
  }
  

3. 相对路径配置错误 #

如果你的配置文件（比如bs-config.js）不在项目根目录，那src这个相对路径可能指向的不是你预期的文件夹。

• 比如配置文件在config文件夹里，那正确的路径应该是../src；或者用绝对路径避免混淆：

  const path = require('path');
  module.exports = {
    server: {
      baseDir: path.join(__dirname, 'src')
    }
  }
  

4. 用debug日志定位问题 #

如果上面的方法都没用，启动Browser Sync时加上--logLevel debug参数，看看控制台的详细日志：

browser-sync start --server src --logLevel debug

日志里会显示Browser Sync尝试加载的文件路径，你能直接看到它是不是在找正确的index.html。

快速验证小技巧 #

你可以直接访问完整路径测试，比如http://localhost:3000/index.html，如果能正常加载，说明就是索引文件的匹配问题，按照上面的方法2调整即可。

内容的提问来源于stack exchange，提问作者Ignas Poška