使用FullCalendar+Gulp+Yarn遇MIME类型错误：原因及解决办法

错误原因分析 #

这个错误的核心是浏览器请求的CSS文件，服务器返回的不是text/css类型内容，而是application/json——大概率是请求路径不对，服务器找不到文件，返回了JSON格式的404错误响应，当然也可能有其他情况：

• 路径配置错位：你用Yarn安装依赖，但link标签指向了bower_components目录（Bower早已被淘汰，FullCalendar现在仅通过npm/yarn发布，文件实际在node_modules里）
• Gulp构建配置疏漏：打包时没有正确复制FullCalendar的CSS文件到部署目录，导致运行时路径找不到资源
• 服务器MIME类型配置异常：服务器未将.css文件正确识别为text/css类型（这种情况比较少见）

分步解决方案 #

1. 先验证路径是否正确
   直接在浏览器地址栏访问 http://localhost/bower_components/fullcalendar/dist/fullcalendar.css，查看返回内容：

   • 如果是JSON格式的错误信息（比如{"code":404,"message":"Not Found"}），说明路径完全错误。Yarn安装的FullCalendar在node_modules/fullcalendar/目录下，而非bower_components。
   • 如果能看到CSS文件的源码，再去检查服务器的MIME类型配置。

2. 修正资源路径与Gulp构建配置

   • 先更新HTML里的link标签路径，开发环境指向node_modules里的文件，生产环境指向Gulp打包后的静态资源路径：

     <!-- 开发环境示例 -->
     <link rel="stylesheet" href="/node_modules/fullcalendar/dist/fullcalendar.css">
     <!-- 生产环境：假设Gulp把CSS复制到了dist/css目录 -->
     <link rel="stylesheet" href="/css/fullcalendar.css">
     

   • 调整Gulp任务，确保把FullCalendar的CSS文件复制到输出目录。比如用gulp-copy插件的示例：

     const gulp = require('gulp');
     const copy = require('gulp-copy');
     
     gulp.task('copy-fullcalendar-css', () => {
       return gulp.src('node_modules/fullcalendar/dist/fullcalendar.css')
         .pipe(copy('dist/css', {prefix: 3})) // 根据你的目录结构调整prefix参数
         .pipe(gulp.dest('./'));
     });
     

   • 如果用gulp-useref或其他资源整合插件，要确保配置文件里正确识别FullCalendar的CSS依赖路径。

3. 服务器MIME类型检查（可选）
   若确认路径正确，但仍返回错误的MIME类型，检查服务器配置：

   • Nginx：确保nginx.conf里有正确的MIME映射：

     http {
       types {
         text/css css;
         # 其他MIME类型配置...
       }
     }
     

   • Apache：在httpd.conf或.htaccess里添加：

     AddType text/css .css
     

内容的提问来源于stack exchange，提问作者Renaud is Not Bill Gates