Vue项目通过index.html引入CSS/JS报错：MIME类型不匹配

错误原因 #

Vue项目里src目录属于源代码目录，会被Webpack打包处理，不能直接通过public/index.html以相对路径访问。你用../src/assets/css/sb-admin-2.min.css引入时，服务器找不到对应文件，返回的是404错误页面（MIME类型为text/html），所以浏览器触发样式表MIME类型不支持的报错。

解决方法 #

方法1：将静态资源移到public目录

• 把src/assets/css/sb-admin-2.min.css复制到public/assets/css/目录（没有对应文件夹就手动创建）
• 修改index.html里的引入代码：

  <link href="./assets/css/sb-admin-2.min.css" rel="stylesheet">
  

public目录下的文件会被直接复制到构建产物的根目录，无需Webpack处理，可直接通过相对路径访问。

方法2：在Vue组件/入口文件中引入（推荐）

如果是全局样式，直接在src/main.js里引入：

import './assets/css/sb-admin-2.min.css'

这种方式Webpack会正确解析样式文件，打包到最终的资源文件中，既符合Vue项目规范，也能避免路径相关问题。

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