使用gulp-npm-dist复制依赖后，引用文件出现Cannot GET错误求助

你遇到的大概率是路径层级错误或本地服务器根目录未正确配置的问题，下面分几个常见排查方向和解决方案来帮你定位：

1. 先确认文件是否真的复制到位 #

首先要验证你的copy:libs任务是否成功把目标文件复制到了预期路径：

• 打开项目目录，检查dist/vendor/bootstrap-select/js/bootstrap-select.min.js是否存在
• 如果文件不存在，可能是gulp-npm-dist没有正确识别到bootstrap-select的资源，你可以先手动指定文件路径做测试：

gulp.task('copy:libs', function() {
  // 手动指定bootstrap-select的文件路径
  gulp.src('node_modules/bootstrap-select/js/bootstrap-select.min.js', {base:'node_modules'})
    .pipe(gulp.dest('dist/vendor'));
});

运行任务后再检查文件是否出现，如果手动指定能成功，那可能是gulp-npm-dist的配置需要调整（比如要确保bootstrap-select在package.json的dependencies中，而非devDependencies，或者需要配置npmDist的筛选参数）。

2. 修正HTML的引用路径 #

你的引用路径是../../vendor/...，这完全取决于index.html所在的位置：

• 如果index.html在项目根目录下，正确的相对路径应该是./dist/vendor/bootstrap-select/js/bootstrap-select.min.js
• 如果index.html在dist目录下（比如dist/index.html），相对路径应该简化为./vendor/bootstrap-select/js/bootstrap-select.min.js
• 更稳妥的方式是使用绝对路径（前提是服务器根目录指向dist）：

<script src="/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>

3. 确认本地服务器的根目录配置 #

如果你用Gulp搭配了本地服务器（比如browser-sync或gulp-connect），一定要确保服务器的根目录设置为dist，否则服务器会从项目根目录查找vendor文件夹，而非dist/vendor。

比如用browser-sync的正确配置示例：

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

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: './dist' // 这里必须指向dist目录
    }
  });
});

4. 清理浏览器缓存再测试 #

有时候浏览器的旧缓存会导致路径识别异常，尝试强制刷新页面（Ctrl+F5）或者清除浏览器缓存后再重新测试。

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