使用Gulp时浏览器出现Cannot GET/错误的技术求助

嘿，这个Cannot GET/错误其实很常见，本质就是你的开发服务器找不到根路径下的入口文件（一般是index.html）。结合你说的Gulp任务已经生成了所需文件夹，我给你几个排查方向：

• 检查服务器的根目录配置
  如果你用的是browser-sync或者gulp-webserver这类插件，一定要确保它们的baseDir指向了你的构建输出文件夹（比如dist、build）。举个常见的错误例子：如果你的构建产物都在./dist里，但服务器配置成了baseDir: './'，那服务器会去项目根目录找index.html，而不是dist文件夹里的，自然会报错。正确的配置大概是这样：

  // 以browser-sync为例
  const browserSync = require('browser-sync').create();
  
  gulp.task('serve', function() {
    browserSync.init({
      server: {
        baseDir: './dist' // 这里要对应你的实际输出目录
      }
    });
  });
  

• 确认index.html被正确复制到输出目录
  有时候Gulp任务可能漏掉了复制index.html的步骤。你需要检查你的Gulp任务里有没有把src目录下的index.html复制到输出文件夹的任务，比如：

  gulp.task('copy-html', function() {
    return gulp.src('./src/index.html') // 你的源文件路径
      .pipe(gulp.dest('./dist')); // 输出目录
  });
  

  同时要确保这个任务被包含在你的默认任务或者构建任务里，比如：

  gulp.task('default', gulp.series('copy-html', '其他任务', 'serve'));
  

  可以看看Gulp的输出日志，确认copy-html这类任务有没有被执行成功。

• 检查入口文件的文件名和路径
  确认输出文件夹里的入口文件确实是index.html，有没有拼写错误（比如写成index.htm或者Index.html）？大部分服务器默认会把index.html作为根路径的入口文件，文件名不匹配也会导致找不到资源。

• 验证服务器的访问路径
  启动服务器后，看看Gulp输出里的访问地址（比如http://localhost:3000），你可以手动在浏览器地址栏输入http://localhost:3000/index.html试试，如果能正常访问，那说明服务器根目录是对的，但默认入口文件没设置对；如果还是不行，那大概率是服务器根目录指向错了。

从你贴的index.html内容来看，文件本身的结构没什么明显问题，重点还是放在服务器配置和文件复制这两块，应该能解决问题。

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