localhost:3000执行Gulp时浏览器显示Cannot GET /的技术问题咨询

我之前在项目里也碰到过一模一样的问题，大概率是Gulp的服务器配置或者文件结构出了疏漏，给你整理几个靠谱的排查方向和解决办法：

最常用的Gulp服务器插件是browser-sync和gulp-connect，这俩的配置错误是导致Cannot GET /的头号原因。

1. 确认根目录指向正确 #

不管用哪个插件，你得确保服务器的根目录指向了存放静态文件的文件夹（比如dist或src）——毕竟服务器要知道从哪找你的index.html。

举个browser-sync的正确配置例子：

const browserSync = require('browser-sync').create();

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: './dist' // 这里要改成你实际的静态文件根目录，比如index.html在src里就写'./src'
    }
  });
});

如果用的是gulp-connect，配置逻辑是一样的：

const connect = require('gulp-connect');

gulp.task('serve', function() {
  connect.server({
    root: './dist', // 同样要指向正确的目录
    livereload: true
  });
});

划重点：你的index.html必须在baseDir/root指定的目录下，不然服务器找不到默认入口文件。

2. 检查默认入口文件名是否匹配 #

服务器默认会优先找index.html、index.htm这类文件，如果你的入口文件名是自定义的（比如main.html），得手动告诉服务器：

用browser-sync的话，加上index配置：

server: {
  baseDir: './dist',
  index: 'main.html' // 替换成你的自定义入口文件名
}

gulp-connect的配置类似：

connect.server({
  root: './dist',
  index: 'main.html'
});

3. 确认Gulp任务是否正常执行 #

运行gulp serve（或者你的服务器任务名称）的时候，盯着终端看有没有报错：

• 要是提示“模块找不到”，说明你忘了安装对应插件，比如npm install browser-sync --save-dev
• 要是任务直接卡住，可能是其他Gulp任务依赖没完成（比如打包任务没生成dist文件）

• 先确认你的项目里有对应的静态文件目录（比如dist），而且里面确实有index.html。如果是打包型项目，记得先跑gulp build生成dist里的文件，再启动服务器。
• 如果你直接访问localhost:3000，服务器找的是根目录的index.html；要是访问localhost:3000/about这类路径，得确保对应的文件存在，或者是SPA的路由配置问题。

如果是React、Vue这类单页应用，前端路由是靠JS控制的，服务器不知道怎么处理非根路径的请求，这时候需要配置fallback：

用browser-sync的话，先安装connect-history-api-fallback：

npm install connect-history-api-fallback --save-dev

然后在配置里加中间件：

const history = require('connect-history-api-fallback');

browserSync.init({
  server: {
    baseDir: './dist'
  },
  middleware: [history()]
});

• 直接在浏览器访问localhost:3000/index.html，如果能打开，说明是默认入口文件的问题；如果还是打不开，那就是服务器根目录或文件不存在的问题。
• 清理浏览器缓存，有时候旧缓存会导致加载异常。
• 换个端口试试（比如改成3001），防止原端口被其他程序占用。

内容的提问来源于stack exchange，提问作者cjones